Vue之多图上传

最近做的项目涉及到了上传多张图片，基本功能都实现了，能添加多张图片，也能编辑删除图片，但是上传的时候，每次点加号，在文件中选中图片后，渲染的时候总是重复刷新一下。

组件 MultiUpload.vue 如下:

<template>
  <div>
    <el-upload class="uploader" :headers="authorToken" :action="UPLOAD_URL" :auto-upload="true"
               :file-list="fileList" list-type="picture-card" :limit="limit?limit:9" :accept="fileType?fileType:'image/*'"
               :on-success="handleGoodsImagesUploadSuccess" :before-upload="handlebeforeUpload" :multiple="true"
               ref="fileupload" :on-exceed="handleUploadExceed" :on-remove="handleRemove"
               :on-preview="handlePictureCardPreview">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :append-to-body="true" :visible.sync="dialogImgVisible" style="z-index: 3000;text-align: center;"
               :close-on-click-modal="false" :close-on-press-escape="false" custom-class="pub_dialog">
      <img width="80%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<!--
	使用用例
	fileType可以是
	audio/*表示“任何音频文件
	video/*表示“任何视频文件
	image/*表示“任何图像文件
	还可以以逗号拼接，如image/*,.pdf

	<multi-upload v-model="form.voucherUrlList" :fileType="image/*"></multi-upload>

	import MultiUpload from '@/components/Upload/MultiUpload'

	components: {
		MultiUpload
	},
-->


<script>
// import {
// 	UPLOAD_URL
// } from '../../utils/api.js';
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    limit: {
      type: Number,
      default: 9
    },
    fileType: String,
  },
  data() {
    return {
      authorToken: {
        'Authorization': 'Bearer ' + sessionStorage.getItem("token")
      },
      UPLOAD_URL: "/v1/admin/common/upload", // 上传的图片服务器地址 即上传图片后台接口的路径
      loading: '',
      param: {
        token: ''
      },
      dialogImageUrl: "",
      dialogImgVisible: false,
      disabled: false,
      imgs:[],
      num:0,
      fileNum:0
    }
  },
  computed: {
    // ['xxx', 'xxx'] 转换为 [{url: 'xxx'}, {url: 'xxx'}]
    fileList() {
      return this.value.map(url => ({
        url
      }))
    }
  },
  methods: {
    handlePictureCardPreview: function(file) {
      this.dialogImageUrl = file.url;
      this.dialogImgVisible = true;
    },
    handleRemove: function(file, fileList) {
      // fileList 为删除后的文件列表
      const value = fileList.map(v => v.url)
      this.$emit('input', value)
    },
    handleGoodsImagesUploadSuccess(response, file, fileList) {
      console.log(response);
      console.log(fileList);

      if (response.code == 200) {
        let imageUrl = response.data;
        this.imgs.push(imageUrl);
        this.num++;
        if(this.num == this.fileNum){
          this.num = 0;
          this.fileNum = 0;
          // 这里如果 this.value.push(imageUrl) 这么写，vue会报出警告，大概意思是value作为props不应该在子组件中被修改
          // 应该根据 value 得到新的值，而不能修改它，this.value.concat(imageUrl)也是可以的，concat方法返回新的数组
          // this.$emit('input', [...this.value, imageUrl])
          this.$emit('input', this.value.concat(this.imgs))
          this.imgs =[];
        }
      } else {
        this.$message.error(file.name + '上传失败!');
      }
    },
    handlebeforeUpload(file) {
      // 这里做可以做文件校验操作
      const isImg = /^image\/\w+$/i.test(file.type)
      if (!isImg && this.fileType == 'image/*') {
        this.$message.error('只能上传 JPG、PNG、GIF 格式!')
        return false
      }
      this.fileNum++;
      console.log(this.fileNum);
    },
    handleUploadExceed() {
      this.$message.error(`最多上传${this.limit}张图片`)
    },
  }
}
</script>
<style>
  /*去除upload组件过渡效果*/
  .el-upload-list__item {
    transition: none !important;
  }
</style>
<style scoped lang="scss">


.hide>>>.el-upload--picture-card {
  display: none;
}
</style>

/v1/admin/common/upload 这个路径下的接口：

@PostMapping("/upload")
@ResponseBody
public AjaxResult uploadImg(@RequestParam("file") MultipartFile fileupload){
    if(fileupload != null){
        String path = OssFileUtils.uploadSingleFile(fileupload);//上传图片
        return AjaxResult.success(path);
    }else {
        return AjaxResult.error();
    }
}




/**
 * @ClassName: DesignFileUtils
 * @Description: 文件操作工具类
 * @Author: 
 * @Date: 
 * @Version 1.0
 **/
public class OssFileUtils {
    /**
     * @Title: uploadSingleFile
     * @Description:  单个文件上传
     * @Author:
     * @param: file
     * @Date: 
     * @return: java.lang.String 成功返回 文件路径，失败返回null
     * @throws: 
     */
    public static String uploadSingleFile(MultipartFile file){
        if(file == null){
            log.error("单文件上传失败，文件为空");
            return null;
        }
        try {
            return OssUtil.upload(OssUtil.generateKey(file.getOriginalFilename()),file.getBytes());
        } catch (Exception e) {
            log.error("单文件上传异常【"+file+"】",e);
        }
        return null;
    }
}

找了很久也不知道是哪里导致的，直到把引用这个组件的地方改了，它就好了。之前在引用组件时还写了很多参数，现在只剩下 v-model="dialogForm.imgUrl" 就正常了。