uploadList.vue
<template> <div class="uploader-list"> <ul v-if="fileList.length>0"> <li v-for="file in fileList" :key="file.id"> <div class="fileItem"> <span>{{file.name.length>30?file.name.substring(0,30)+'...':file.name}}({{commonFun.getFileSize(file.size)}})-{{(file.status=='ready'&&Number(file.percentage)>0)?status.stop:status[file.status]}} <span v-if="file.status=='uploading'||file.status=='ready'">({{Number(file.percentage).toFixed(1)}}%)</span> </span> <svg-icon icon-class="stop" @click="stopUpload(file)" v-if="file.status=='uploading'"/> <i class="el-icon-caret-right" @click="startUpload(file)" v-if="file.status=='ready'||file.status=='stop'"></i> <i class="el-icon-close" @click="delUpload(file)" style="color:#f56c6c"></i> </div> <el-progress style="width:440px;" :width="440" :percentage="file.percentage"><span>{{Number(file.percentage).toFixed(1)}}%</span></el-progress> </li> </ul> </div> </template> <script> import { toRefs,reactive,watchEffect,getCurrentInstance } from 'vue'; import { useI18n } from 'vue-i18n'//要在js中使用国际化 export default { name: "uploadList", props: { fileList:Array, }, emits:["stopUploadFile","uploadFileFun"], setup(props,ctx) { const { t } = useI18n(); const {proxy} = getCurrentInstance(); const commonFun = proxy.$fun; const state = reactive({ files:[], stopUpload(file){ ctx.emit('stopUploadFile',file,'stop') }, startUpload(file){ ctx.emit('uploadFileFun',file) }, delUpload(file){ ctx.emit('stopUploadFile',file,'del') }, }) let status={ ready:t("personal.page_myspace_wait_upload"), stop:t("common.constants_stopped"), uploading:t("personal.page_myspace_uploading"), success:t("common.constants_uploaded"), } watchEffect(()=>{ state.files = props.fileList }) return{ ...toRefs(state), status, commonFun } } } </script> <style lang="scss"> .uploader-list { position: relative; } .uploader-list > ul { list-style: none; margin: 0; padding: 0; padding-bottom: 20px; li{ width: 490px; margin: auto; height: 50px; border-bottom: 1px solid #cdcdcd; background: #FFF; .fileItem{ line-height: 30px; font-size: 14px; } } } </style>将上传列表单独创建一个uploadList.vue
上传组件
<!-- 上传文件 --> <div class="file-panel" :class="showPercentage ? 'showPercentage' : 'hidePercentage'"> <el-card class="panelCard"> <template #header> <div class="card-header"> <span>文件列表</span> <div> <i style="color:#409EFF" @click="showPercentageFun(false)" v-if="showPercentage" class="el-icon-minus" ></i> <i style="color:#409EFF" @click="showPercentageFun(true)" v-else class="el-icon-full-screen"></i> </div> </div> </template> <upload-list v-if="showPercentage" @stopUploadFile="stopUploadFile" @uploadFileFun="uploadFileFun" :fileList="uploadFileList"></upload-list> </el-card> </div> <el-dialog :title="$t('common.constants_add_file')" v-model="layout.upload" width="600px" custom-class="qrCodeDialog" > <el-upload ref="upload" style="text-align:center;" class="upload-demo" :action="UploadUrl()" multiple drag :auto-upload="false" name="modelfile" :file-list="uploadFileList" :show-file-list="false" :data="{pfolderid:pfolderid.pfolderid}" :on-change="fileChange" :on-progress="fileProgress" :on-success="uploadSuccess" > <i class="el-icon-upload"></i> <div class="el-upload__text">{{$t("common.constants_drop_file")}}<em>{{$t("common.constants_click_file")}}</em></div> </el-upload> <ul v-if="uploadFileList1.length>0" class="el-upload-list el-upload-list--text"> <li v-for="item of uploadFileList1" :key="item.uid" class="el-upload-list__item is-ready" tabindex="0"><!--v-if--> <a class="el-upload-list__item-name"><i class="el-icon-document"></i>{{item.name}}</a> <label class="el-upload-list__item-status-label"> <i class="el-icon-upload-success el-icon-circle-check"></i> </label><i class="el-icon-close"></i> </li> </ul> <!-- <el-progress v-if="uploadPercentage>0" :percentage="uploadPercentage" color="#409eff" /> --> <template #footer> <span class="dialog-footer"> <el-button @click="layout.upload = false">{{$t("common.constants_close")}}</el-button> <el-button type="primary" @click="uploadFileFun">{{$t("common.constants_begin_upload")}}</el-button> </span> </template> </el-dialog>具体方法
uploadSuccess (res) { var flag=true; var result=""; res.map(item => { if(item.return=='0'){ flag=true; }else{ flag=false; result=item.return; } }); if(flag){ ElMessage.success(t("common.constants_file_success")); }else{ ElMessage.warning(t(`common[${result}]`)); } state.layout.upload=false; stateFun.refresh(); }, // 文件上传 uploadFun(){ state.pfolderid.pfolderid=state.file.folderid; uploadFileList1.value=[]; state.layout.upload=true; }, fileProgress(event, file,fileList){ uploadFileList.value=fileList; console.log(file) }, // 停止上传 stopUploadFile(file,type){ if(type=='stop'){ upload.value.abort(file); uploadFileList.value.findIndex(item =>{ if(item.uid==file.uid){ item.status="ready"; return true } }) }else{ var index = uploadFileList.value.findIndex(item =>{ if(item.uid==file.uid){ return true } }) uploadFileList.value.splice(index,1) } }, // uploadFileFun(){ // if(file&&file.uid){ // uploadFileList.value.findIndex(item =>{ // if(item.uid==file.uid){ // item.status="ready"; // item.percentage=0; // return true // } // }) // }else{ state.layout.upload=false; // } upload.value.submit(); }, UploadUrl() { return "/api/"+store.state.site.version+"/file/uploadfromweb" }, // 文件状态改变时的钩子 fileChange(file,fileList) { uploadFileList1.value.push(file); uploadFileList.value=fileList; showPercentage.value=true; }, showPercentageFun(val){ showPercentage.value=val; },