关于element-ui中上传图片样式自定义的坑

我们在项目中可能遇到上传图片的问题，但是element-ui中提供的上传图片样式不满足我们的需求，我们在实现的时候可能会遇到坑。

以我在项目中上传图片为例，如下图所示：

像这种，在element-ui中是没有这种样式的，所以我们只能自己写，我们先看下代码

<el-upload
      ref="foreignPersonUploadItem"
      class="avatar-uploader"
      :action="uploadUrl" //上传的地址
      name="file" // 上传的类型
      :show-file-list="false"
      :multiple="true" // 是否多选
       :limit="9" //最多上传的个数
       :on-exceed="chooseImg" //超出上传个数的钩子
       :on-success="handleAvatarSuccess" // 上传成功的钩子
       accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx,.JPG,.JPEG,.PBG,.GIF,.PDF,.DOC,.DOCX,.XLS,.XLSX" //限制上传的类型
       :before-upload="beforeAvatarUpload"  //上传之前>
       <el-button type="text">上传附件</el-button>
 </el-upload>

这里的坑具体在哪里？我们上传成功，把各个不同的地址放到不同的数组中，做一个渲染不就完事了吗？对，是没有任何问题。但是删除之后就有问题了。如果说我们使用了element-ui中的样式，那么我们只需要使用下面的这个钩子就可以解决

on-remove	文件列表移除文件时的钩子	function(file, fileList)

但是，我们自己写的样式，使用这个肯定有问题，我们删除了，把对应的数组的下标删除了不就可以了吗？页面显示是没有问题，真正的问题在于，你限制了上传的个数limit，再次上传的时候就会执行我们上图所示的这个钩子函数

on-exceed	文件超出个数限制时的钩子	function(files, fileList)

所以，你不删除，是合适的，如果删除了就有问题，就是再次上传发现上传不成功了。根据element-ui的机制，limit限制上传个数，那么肯定有对应的参数，我们在删除的时候把它对应的参数数组也删除了就可以成功了。

解决办法：

我们在这个组件上面添加

ref="foreignPersonUploadItem"

我们在删除的地方，执行下面的代码

deleteImg (index) { // 点击删除删除图片
      this.form.attachment.splice(index, 1)
      this.$refs.uploadItem.uploadFiles.splice(index, 1)
},

我们上面这个方法正是删除图片的方法，传的参数index，是对应删除图片的下标，

this.form.attachment.splice(index, 1)  // 这个是我们删除数组里面的下标，同时会刷新页面的数据

this.$refs.uploadItem.uploadFiles.splice(index, 1)  //这个是删除的是element-ui中对应limit限制的数组的

那么这样我们不用element-ui中上传图片样式，就可以解决删除图片后上传不了图片的问题。

关于element-ui中上传图片样式自定义的坑

猜你喜欢