elementui-upload组件自定义样式上传(upload中常用的属性，但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成

序章

前几天公司给安排了一个上传组件的任务，但是给用户的上传图片的那个样式，elementui却没有，这时我只能自定义样式了。

遇到了同等bug

        直接看解决标题

 upload组件属性有很多在这就不在赘述(官网有，简洁明了)本文只介绍一个属性:file-list官网的表述是上传的文件列表, 例如:

[{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]

 这个时候就会把url里面文件展示出来，但是真到用的时候还真不是那么简单

第一个用法结合show-file-list(是否展示文件列表)

看一下这段代码

 这个show-file-list默认为真也就是展示文件列表(属性file-list中包含的文件)

效果图：

如果我们把show-file-list设为false;这个红框内的内容将消失

用法二

如果我的样式并不写在uplaod内，这个时候我们就无法使用elementui提供给我们删除文件的操作。这时候bug就来了。

upload代码

	上传


<-- 样式代码 -->

删除

我自定义的样式展示(像轮播图等等) ，我这里就直接用一个img表示

上传按钮写在upload组件内要不然上传也要自己写；

这个时候你点击删除按钮来删除上传的图片，展示图片确实是删除了某一个img但是当你再次点击的时候会把你以前上传的图片都重新上传一遍；

例如

你上传了1 2 3

然后删除了2

当你点再次击上传的时候，上传4

但是效果确实上传了1 2 3 4

导致展示的图片为

1 3 1 2 3 4

这个就是因为你的删除操作并过没有操作到file-list(因为没有写在upload内主要是删除按钮的样式也是自定义的，不能写在upload组件内)

还记的file-list的定义吗---上传的文件列表所以file-list会有1 2 3 4这个几个图片，并且上传的时候会把file-list的东西都上传一遍

解决

大家应该都能想到解决应该就是在自己搞的删除按钮去操作file-list但是完全没必要

看一下我的思路，那就是file-list中保存了我上次（甚至上上次上传的文件）这些保存是完全没有必要的，我们只需要我本次上传的文件，所以我们直接在本次上传完之后去清空file-list = []即可

代码

 <-- 一定要写上这个属性 -->
	上传

<-- 样式代码 -->

删除

我自定义的样式展示(像轮播图等等) ，我这里就直接用一个img表示

//在data中注册 data() { return { fileList: [], } } methods: { //上传成功的方法 UploadSuccess(fileList,id){ //写在最后面 fileList = []清空 } }