关于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中的样式，那么我们只需要使用下面的这个钩子就可以解