vue3.0 elementUI实现上传文件的暂停继续功能

2022年6月18日10:16:21

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;
			},
  • 作者:一只前端
  • 原文链接:https://blog.csdn.net/weixin_46641826/article/details/121374201
    更新时间:2022年6月18日10:16:21 ,共 5111 字。