elementui upload 上传多个文件只调用一次接口

html

tips::disabled='true’时 无法上传,且照片墙模式只有放大没有删除图标*
设置class为modified_是为了控制上传图标不显示(设计需要)

<el-upload v-model:file-list="files" class="upload-demo" list-type="picture-card" :class="{'modified_':!state.modified}" :auto-upload="false" accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG" :on-change="(file, fileList) => {handleUploadLitigation(file, fileList)}" :on-preview="handleClick" :multiple='true'>
	<el-icon class="w109">
		<Plus />
	</el-icon>
</el-upload>

js

let maxFileLength = ref(0)
const handleUploadLitigation = (file, fileList) => {
  let length = fileList.length;
  maxFileLength.value = Math.max(length, maxFileLength.value)
  setTimeout(() => {//必须使用setTimeOut
    if (maxFileLength.value !== length) {
      return
    }
    //fileList包含所有之前上传过的文件,筛选出未上传的去上传
    let files = fileList.filter(item => { return !item.hasOwnProperty('code'); });
    uploadFileList(files)
  }, 0)
};


const uploadFileList = (files) => {
  let formData = new FormData();
  files.forEach(file => formData.append("files", file.raw));
  formData.append("cover", true);
  formData.append("fileCategory", 'NONE');
  state.loading = true
  uploadFileOss(formData).then((res) => {
    if (res.code == 200) {
      state.loading = false
      let data = res.data
      data.forEach((item, index) => {
        files[index].code = item.code//给上传的文件新增code属性
      });
    }
  }, () => {
    state.loading = false
  });
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值