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

时间:2025-01-19 10:35:50

直接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组件上传闪动的解决