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

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

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

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

       上传附件
 

这里的坑具体在哪里？我们上传成功，把各个不同的地址放到不同的数组中，做一个渲染不就完事了吗？对，是没有任何问题。但是删除之后就有问题了。如果说我们使用了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中上传图片样式，就可以解决删除图片后上传不了图片的问题。