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

序章

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

遇到了同等bug

直接看解决标题

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

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

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

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

看一下这段代码

  
  点击上传
  只能上传jpg/png文件，且不超过500kb




  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }

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

效果图：

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

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

用法二

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

upload代码

 {UploadSuccess(fileList, item.id);}
    :show-file-list="false" 
	:multiple="true" 
>
	上传






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

我自定义的样式展示(像轮播图等等) ，我这里就直接用一个img表示 //在data中注册 data() { return { fileList: [], } } methods: { //上传成功的方法 UploadSuccess(fileList,id){ //写在最后面 fileList = []清空 } }