Vue+UpLoad实现上传预览和删除图片的实践

<el-upload
  class="upload-demo"
  action=""//引号里面填要上传的图片地址，用接口的话是公共的接口地址拼接一个图片的接口
  :on-preview="handlePreview"//图片已经上传完成时点击触发（钩子函数）
  :on-remove="handleRemove"//点击右上角X号触发的钩子函数
  :on-success="handleSuccess"//上传成功的一个钩子函数
  :file-list="fileList"//上传的文件列表
  list-type="picture"//上传的文件类型，有三个参数，分别是text/picture/picture-card，分别是文本类型、图片类型、卡片类型。个人推荐选第二个较好
  :headers="headerObj"//图片上传的时候需要请求头部，我们可以定义一个变量，设置获取token信息，如下代码:
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
 
//存放token的变量
 headerObj: {
        Authorization: window.localStorage.getItem("token"),
      },

  <el-dialog
      title="图片预览"//上方的标题
      :visible.sync="previewDialogVisible"//控制显示隐藏的变量
      width="50%"//弹框的宽度占比
    >
        //img标签中的src属性接受的是点击预览时传递的图片地址
      <img :src="picPreviewPath" alt="" class="previewImg" />
    </el-dialog>

  // 处理图片预览
    handlePreview(file) {//会得到一个参数，这是返回的图片的一些信息，主要的是图片的url
      this.picPreviewPath = file.response.data.url;//把url参数赋值给这个变量
      this.previewDialogVisible = true;//再让弹框显示
    },

 // 处理移除图片的操作
    handleRemove(file) {
      // 1.获取将要删除图片的临时路径
      const filePath = file.response.data.tmp_path;
      // 2.从pics数组中，找到图片对应的索引值
      const i = this.addForm.pics.findIndex((x) => x.pic === filePath);
      // 3.调用splice方法，移除图片信息
      this.addForm.pics.splice(i, 1);
    },

 // 监听图片上传成功事件
    handleSuccess(response) {
      // 1.拼接得到一个图片信息对象 临时路径
      const picInfo = { pic: response.data.tmp_path };
      // 2.将图片信息对象，push到pics数组中
      this.addForm.pics.push(picInfo);
    },