Vue+UpLoad实现上传、点图预览、删除图片

1、用vue+Element完成一个图片上传、点图预览、加删除功能，如图：

2.首先我们再组件中引入这一段代码，每个属性的使用也都放在这里了：

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


//存放token的变量
 headerObj: {
        Authorization: window.localStorage.getItem("token"),
      },

3.接下来就是它的on-preview属性，我们可以用它来实现图片预览

先要设一个图片预览的弹框：

  
        //img标签中的src属性接受的是点击预览时传递的图片地址
      
    

再进行逻辑操作 

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

3.然后来实现点击删除图片，这时候用到了on-remove这个属性 

 // 处理移除图片的操作
    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);
    },

 4.前面的功能都实现了的话，到这时候你已经成功了一半了，若项目需要提交添加的图片，则用到了它的on-success属性。

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

5.文章小提示： 

1.别忘了给需要设置成动态属性的属性加上v-bind

2.在data中注册需要绑定的变量 

就此完成，文章 条理清晰，言简意赅，造福大家，谢谢支持。