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

彭世瑜

于 2020-12-31 17:20:16 发布

阅读量6k

点赞数 1

CC 4.0 BY-SA版权

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/112034295

这篇博客介绍了如何利用饿了么UI组件库中的Upload组件，解决在前端开发中遇到的多图上传及上传过程中图片闪动的问题。通过设置file-list、on-success、on-remove等属性，自定义上传逻辑，并结合formData进行文件提交，确保图片上传的成功与用户体验。同时，提供了处理添加、移除文件的方法，确保文件列表的正确管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接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);
	}
}