修复多文件上传报错出现的异常问题
							parent
							
								
									9a895763d5
								
							
						
					
					
						commit
						39efed1710
					
				| 
						 | 
				
			
			@ -12,7 +12,7 @@
 | 
			
		|||
      :show-file-list="false"
 | 
			
		||||
      :headers="headers"
 | 
			
		||||
      class="upload-file-uploader"
 | 
			
		||||
      ref="upload"
 | 
			
		||||
      ref="fileUpload"
 | 
			
		||||
    >
 | 
			
		||||
      <!-- 上传按钮 -->
 | 
			
		||||
      <el-button size="mini" type="primary">选取文件</el-button>
 | 
			
		||||
| 
						 | 
				
			
			@ -151,14 +151,16 @@ export default {
 | 
			
		|||
      this.$modal.closeLoading()
 | 
			
		||||
    },
 | 
			
		||||
    // 上传成功回调
 | 
			
		||||
    handleUploadSuccess(res) {
 | 
			
		||||
      this.uploadList.push({ name: res.fileName, url: res.fileName });
 | 
			
		||||
      if (this.uploadList.length === this.number) {
 | 
			
		||||
        this.fileList = this.fileList.concat(this.uploadList);
 | 
			
		||||
        this.uploadList = [];
 | 
			
		||||
        this.number = 0;
 | 
			
		||||
        this.$emit("input", this.listToString(this.fileList));
 | 
			
		||||
    handleUploadSuccess(res, file) {
 | 
			
		||||
      if (res.code === 200) {
 | 
			
		||||
        this.uploadList.push({ name: res.fileName, url: res.fileName });
 | 
			
		||||
        this.uploadedSuccessfully();
 | 
			
		||||
      } else {
 | 
			
		||||
        this.number--;
 | 
			
		||||
        this.$modal.closeLoading();
 | 
			
		||||
        this.$modal.msgError(res.msg);
 | 
			
		||||
        this.$refs.fileUpload.handleRemove(file);
 | 
			
		||||
        this.uploadedSuccessfully();
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 删除文件
 | 
			
		||||
| 
						 | 
				
			
			@ -166,6 +168,16 @@ export default {
 | 
			
		|||
      this.fileList.splice(index, 1);
 | 
			
		||||
      this.$emit("input", this.listToString(this.fileList));
 | 
			
		||||
    },
 | 
			
		||||
    // 上传结束处理
 | 
			
		||||
    uploadedSuccessfully() {
 | 
			
		||||
      if (this.number > 0 && this.uploadList.length === this.number) {
 | 
			
		||||
        this.fileList = this.fileList.concat(this.uploadList);
 | 
			
		||||
        this.uploadList = [];
 | 
			
		||||
        this.number = 0;
 | 
			
		||||
        this.$emit("input", this.listToString(this.fileList));
 | 
			
		||||
        this.$modal.closeLoading();
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 获取文件名称
 | 
			
		||||
    getFileName(name) {
 | 
			
		||||
      if (name.lastIndexOf("/") > -1) {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -9,8 +9,8 @@
 | 
			
		|||
      :limit="limit"
 | 
			
		||||
      :on-error="handleUploadError"
 | 
			
		||||
      :on-exceed="handleExceed"
 | 
			
		||||
      name="file"
 | 
			
		||||
      :on-remove="handleRemove"
 | 
			
		||||
      ref="imageUpload"
 | 
			
		||||
      :on-remove="handleDelete"
 | 
			
		||||
      :show-file-list="true"
 | 
			
		||||
      :headers="headers"
 | 
			
		||||
      :file-list="fileList"
 | 
			
		||||
| 
						 | 
				
			
			@ -117,25 +117,6 @@ export default {
 | 
			
		|||
    },
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    // 删除图片
 | 
			
		||||
    handleRemove(file, fileList) {
 | 
			
		||||
      const findex = this.fileList.map(f => f.name).indexOf(file.name);
 | 
			
		||||
      if(findex > -1) {
 | 
			
		||||
        this.fileList.splice(findex, 1);
 | 
			
		||||
        this.$emit("input", this.listToString(this.fileList));
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 上传成功回调
 | 
			
		||||
    handleUploadSuccess(res) {
 | 
			
		||||
      this.uploadList.push({ name: res.fileName, url: res.fileName });
 | 
			
		||||
      if (this.uploadList.length === this.number) {
 | 
			
		||||
        this.fileList = this.fileList.concat(this.uploadList);
 | 
			
		||||
        this.uploadList = [];
 | 
			
		||||
        this.number = 0;
 | 
			
		||||
        this.$emit("input", this.listToString(this.fileList));
 | 
			
		||||
        this.$modal.closeLoading();
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 上传前loading加载
 | 
			
		||||
    handleBeforeUpload(file) {
 | 
			
		||||
      let isImg = false;
 | 
			
		||||
| 
						 | 
				
			
			@ -171,11 +152,42 @@ export default {
 | 
			
		|||
    handleExceed() {
 | 
			
		||||
      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
 | 
			
		||||
    },
 | 
			
		||||
    // 上传成功回调
 | 
			
		||||
    handleUploadSuccess(res, file) {
 | 
			
		||||
      if (res.code === 200) {
 | 
			
		||||
        this.uploadList.push({ name: res.fileName, url: res.fileName });
 | 
			
		||||
        this.uploadedSuccessfully();
 | 
			
		||||
      } else {
 | 
			
		||||
        this.number--;
 | 
			
		||||
        this.$modal.closeLoading();
 | 
			
		||||
        this.$modal.msgError(res.msg);
 | 
			
		||||
        this.$refs.imageUpload.handleRemove(file);
 | 
			
		||||
        this.uploadedSuccessfully();
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 删除图片
 | 
			
		||||
    handleDelete(file) {
 | 
			
		||||
      const findex = this.fileList.map(f => f.name).indexOf(file.name);
 | 
			
		||||
      if(findex > -1) {
 | 
			
		||||
        this.fileList.splice(findex, 1);
 | 
			
		||||
        this.$emit("input", this.listToString(this.fileList));
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 上传失败
 | 
			
		||||
    handleUploadError() {
 | 
			
		||||
      this.$modal.msgError("上传图片失败,请重试");
 | 
			
		||||
      this.$modal.closeLoading();
 | 
			
		||||
    },
 | 
			
		||||
    // 上传结束处理
 | 
			
		||||
    uploadedSuccessfully() {
 | 
			
		||||
      if (this.number > 0 && this.uploadList.length === this.number) {
 | 
			
		||||
        this.fileList = this.fileList.concat(this.uploadList);
 | 
			
		||||
        this.uploadList = [];
 | 
			
		||||
        this.number = 0;
 | 
			
		||||
        this.$emit("input", this.listToString(this.fileList));
 | 
			
		||||
        this.$modal.closeLoading();
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 预览
 | 
			
		||||
    handlePictureCardPreview(file) {
 | 
			
		||||
      this.dialogImageUrl = file.url;
 | 
			
		||||
| 
						 | 
				
			
			@ -186,7 +198,9 @@ export default {
 | 
			
		|||
      let strs = "";
 | 
			
		||||
      separator = separator || ",";
 | 
			
		||||
      for (let i in list) {
 | 
			
		||||
        strs += list[i].url.replace(this.baseUrl, "") + separator;
 | 
			
		||||
        if (list[i].url) {
 | 
			
		||||
          strs += list[i].url.replace(this.baseUrl, "") + separator;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      return strs != '' ? strs.substr(0, strs.length - 1) : '';
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue