Vue图片上传删除预览操作

样式是通过element-ui实现的，使用的时候要先导入所需组件
html

<!-- action 表示图片要上传到的后台API地址  （1.9接口）  -->
<!-- on-preview 预览图片 -->
 <!-- list-type 预览图片的预览方式 -->
 <el-upload
   :action="uploadURL"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   list-type="picture"
   :headers="headerObj"
   :on-success="handleSuccess"
 >
   <el-button size="small" type="primary">点击上传</el-button>
 </el-upload>


<!-- 预览图片的对话框 -->
<el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
  <img :src="previewPath" alt="" class="previewImg" />
</el-dialog>

data

addForm: {
    // 图片的数组
    pics: [],
},
      
// 上传图片的URL地址
uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
// 图片上传组件的headers请求头对象
headerObj: {
  Authorization: window.sessionStorage.getItem('token'),
},
// 预览图片
previewPath: '',
// 控制 预览图片 对话框 的 显示与隐藏
previewVisible: false,

js

// 处理图片预览效果
    handlePreview(file) {
      console.log(file)
      this.previewPath = file.response.data.url
      this.previewVisible = true
    },
    // 处理移除图片的操作
    handleRemove(file) {
      console.log(file)
      // 1.获取将要删除的图片的临时路径
      const filePath = file.response.data.tmp_path
      // 2.从pics数组中，找到这个图片对应的索引值
      const i = this.addForm.pics.findIndex((x) => x.pic === filePath)
      // 3.调用数组的 splice 方法，把图片信息对象，从 pics 数组中移除
      this.addForm.pics.splice(i, 1)
      console.log(this.addForm)
    },
    // 监听图片上传成功的事件
    handleSuccess(response) {
      console.log(response)
      // 1.拼接得到一个图片信息对象
      const picInfo = { pic: response.data.tmp_path }
      // 2.将图片信息对象，push到pics数组中
      this.addForm.pics.push(picInfo)
      console.log(this.addForm)
    },

css

.previewImg {
  width: 100%;
}