初中上哪个网站找题做,太仓有做网站的地方吗,网站建设作业怎么写,个人博客大全之前写了两篇关于文件上传的文章 【篇一】使用springbootvue实现阿里云oss上传 【篇二】使用springbootvue实现阿里云oss文件直传#xff0c;解决大文件分片上传问题 今天介绍一下在vue3中实现阿里云oss文件直传#xff0c;主要是基于篇二中的源码进行修改#xff0c;看具体…之前写了两篇关于文件上传的文章 【篇一】使用springbootvue实现阿里云oss上传 【篇二】使用springbootvue实现阿里云oss文件直传解决大文件分片上传问题 今天介绍一下在vue3中实现阿里云oss文件直传主要是基于篇二中的源码进行修改看具体代码
OssFileUpload组件
templatediv classupload-fileel-upload:multiplemultiple:acceptaccept.join(,)action#:http-requesthandleUpload:before-uploadhandleBeforeUpload:file-listfileList:limitlimit:on-exceedhandleExceed:show-file-listfalse:datadataclassupload-file-uploaderreffileUpload!-- 上传按钮 --el-button typeprimary选取文件/el-buttontemplate v-ifmultiple 按住Ctrl键多选/template/el-upload!-- 上传提示 --div classel-upload__tip slottip v-ifshowTip fileList.length0span v-iflimit 1、文件数量限制为 b stylecolor: #f56c6c{{ limit }}个/b/spanspan v-iffileSize 2、文件大小不超过 b stylecolor: #f56c6c{{ fileSize }}MB/bbr/spanspan v-iffileType 3、文件格式为 b stylecolor: #f56c6c{{ fileType.join(/) }}/bbr/span/div!-- 文件列表 --transition-group classupload-file-list el-upload-list el-upload-list--text nameel-fade-in-linear tagul height485li v-for(file, index) in fileList :keyfile.uid || index classel-upload-list__item ele-upload-list__item-contentel-link :hreffile.url :underlinefalse target_blankspan classel-icon-document {{ file.name }} /span/el-linkdiv classele-upload-list__item-content-actionel-link :underlinefalse clickhandleDelete(index) typedanger stylewidth: 50px删除/el-link/div/li/transition-group/div
/templatescript setup
import {handleMD5} from /utils/md5;
import {generateOssPolicy} from /api/file/file;
import {POST} from /utils/request;const props defineProps({// 是否可多选multiple: {type: Boolean,default: true,},// 值value: [String, Object, Array],// 数量限制limit: {type: Number,default: 5,},// 大小限制(MB)fileSize: {type: Number,default: 5,},// 文件类型, 例如[png, jpg, jpeg]fileType: {type: Array,default: () [doc, xls, xlsx, ppt, txt, pdf],},accept: {type: Array,default: () [.doc, .xls, .xlsx, .ppt, .txt, .pdf],},// 是否显示提示isShowTip: {type: Boolean,default: true},// 是否重命名rename: {type: Boolean,default: true}
});const {proxy} getCurrentInstance();
const emit defineEmits();
const number ref(0);
const uploadList ref([]);
const fileList ref([]);
const data ref({});
const showTip computed(() props.isShowTip (props.fileType || props.fileSize)
);
watch(() [props.value, props.rename], ([val1, val2]) {if (val1) {let temp 1;// 首先将值转为数组const list Array.isArray(val1) ? val1 : props.value.split(,);// 然后将数组转为对象数组fileList.value list.map(item {if (typeof item string) {item {name: item.name, url: item.url};}item.uid item.uid || new Date().getTime() temp;return item;});} else {fileList.value [];return [];}if (val2) {data.value {rename: val2}}
}, {deep: true, immediate: true});// 上传前校检格式和大小
function handleBeforeUpload(file) {// 校检文件类型if (props.fileType) {const fileName file.name.split(.);const fileExt fileName[fileName.length - 1];const isTypeOk props.fileType.indexOf(fileExt) 0;if (!isTypeOk) {proxy.$modal.msgError(文件格式不正确, 请上传${props.fileType.join(/)}格式文件!);return false;}}// 校检文件大小if (props.fileSize) {const isLt file.size / 1024 / 1024 props.fileSize;if (!isLt) {proxy.$modal.msgError(上传文件大小不能超过 ${props.fileSize} MB!);return false;}}//增加判断逻辑如果是视频文件获取视频分辨率const isVideo file.type video/mp4 || file.type video/webm;if (isVideo) {// 创建一个视频元素const video document.createElement(video);video.preload metadata;// 设置视频源video.src URL.createObjectURL(file);// 监听加载元数据完成video.onloadedmetadata () {URL.revokeObjectURL(video.src); // 释放URL对象const width video.videoWidth;const height video.videoHeight;// 获取视频时长const duration video.duration;file.width width;file.height height;file.duration duration;// 这里可以根据分辨率做进一步处理例如检查分辨率是否符合要求};}proxy.$modal.loading(正在上传文件请稍候...);number.value;return true;
}// 文件个数超出
function handleExceed() {proxy.$modal.msgError(上传文件数量不能超过 ${props.limit} 个!);
}// 删除文件
function handleDelete(index) {fileList.value.splice(index, 1);emit(update:value, listToString(fileList.value));
}// 上传结束处理
function uploadedSuccessfully() {if (number.value 0 uploadList.value.length number.value) {fileList.value fileList.value.filter(f f.url ! undefined).concat(uploadList.value);uploadList.value [];number.value 0;emit(update:value, listToString(fileList.value));proxy.$modal.closeLoading();}
}/** 上传操作 */
function handleUpload(file) {handleMD5(file.file).then(md5 {const data {fileName: file.file.name,md5: md5,rename: props.rename// 增加视频的分辨率、播放时长后端接收后再通过回调接口返回前端即可获取width: file.file.width,height: file.file.height,duration: file.file.duration,};generateOssPolicy(data).then((response) {let data response.datalet formData new FormData();formData.append(OSSAccessKeyId, data.accessKeyId);formData.append(signature, data.signature);formData.append(policy, data.policy);formData.append(key, data.filePath);formData.append(callback, data.callback);formData.append(success_action_status, 200);formData.append(file, file.file);POST(data.host, formData).then((res) {let params res.dataif (params.code ! 200) {proxy.$modal.msgError(params.msg);return;}uploadList.value.push(params.data);uploadedSuccessfully();proxy.$modal.msgSuccess(上传成功);});})})
}// 获取文件名称
function getFileName(name) {if (name.lastIndexOf(/) -1) {return name.slice(name.lastIndexOf(/) 1);} else {return ;}
}// 对象转成指定字符串分隔
function listToString(list, separator) {let str ;separator separator || ,;for (let i in list) {str list[i].url separator;}return str ! ? str.substring(0, str.length - 1) : ;
}//暴露给父组件否则无法获取值
defineExpose({fileList
})
/scriptstyle scoped langscss
.upload-file-uploader {margin-bottom: 5px;
}
.upload-file-list {max-height: 420px;overflow-y: auto;
}
.el-upload__tip span {display: block;width: fit-content;line-height: 20px;
}
.upload-file-list .el-upload-list__item {border: 1px solid #e4e7ed;line-height: 2;margin-bottom: 10px;position: relative;
}
.upload-file-list .ele-upload-list__item-content {display: flex;justify-content: space-between;align-items: center;color: inherit;
}
.ele-upload-list__item-content-action .el-link {margin-right: 10px;
}
/style父组件引用
/** 提交按钮 */
function submitForm() {proxy.$refs[editForm].validate(valid {if (valid) {// 获取子组件的fileListform.value.files proxy.$refs.upload.fileListif (!Array.isArray(form.value.files) || form.value.files.length 0) {proxy.$alert(请上传文件);return false;}//增加了多个文件属性字段form.value.download form.value.files[0].urlform.value.name form.value.files[0].nameform.value.userName form.value.files[0].userform.value.md5 form.value.files[0].md5form.value.size form.value.files[0].sizesave(form.value).then(() {proxy.$modal.msgSuccess(操作成功);open.value false;getList();});}});
}后端代码除组装callbackBody增加了几个参数外逻辑基本相同故省略。
