且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

elementUI:Upload组件list-type: picture-card上传闪动

更新时间:2022-08-22 14:46:42

直接push file对象 可以解决

多图上传示例

<el-upload
        action="action"
        list-type="picture-card"
        name="image"
        :file-list="files"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :http-request="uploadFile"
      >
        <i class="el-icon-plus"></i>
</el-upload>

props: {
    // 引用传递数组 { name, url }
    files: { type: Array, default: null },
 },
 
methods: {
     // 自定义实现文件上传
     async uploadFile(params) {
      let form = new FormData();
      form.append('image', params.file);
      const res = await this.$Http.commonUpload(form);
      return res;
    },
    
    // 处理添加
    handleSuccess(response, file, fileList) {
       // 设置url
       file.url = response.data.url;
       this.files.push(file);
    },
    
    // 移除
    handleRemove(file, fileList) {
        this.files.splice(0, this.files.length, ...fileList);
    }
} 

参考

饿了么UI组件库中,Upload组件上传闪动的解决