关于AVUE CRUD组件图片上传的upload-delete方法

关于AVUE CRUD组件图片上传的upload-delete方法

最近写项目使用到avue的crud上传图片这个功能，当做到单图编辑时删除图片再上传的时候，发现删除后原来的图片值还存在。研究一番后发现了其中的奥秘。

首先是单图的配置如下：

{
  label: '图片(背面)',
  prop: 'imageBackfaceUrl',
  type: 'upload',
  listType: 'picture-img',
  loadText: '图片上传中，请稍等',
  propsHttp: {
  	// home类似axios中的baseurl会拼接到返回的url前面
    home: 'http://localhost:3100/image/',
    // 这里有一个小坑  默认是在res.data下寻找path和filename字段
    // 如果需要指定返回数据下寻找请设置res: xxx到propsHttp下
    url: 'path',
    name: 'filename'
  },
  span: 24,
  tip: '只能上传jpg/png用户头像，且不超过500kb',
  //图片上传api
  action: '/img/imageUpload'
},

这是最开始的小坑 可能是第一次使用 没看懂文档 哈哈啊哈。

接下来是删除

handleUploadImageDelete(column, path) {
	//column  列配置
  console.log(column)
  // path及图片全地址，因为我后台存的是文件名  所以做了截取
  const newPath = path.slice(28, path.length)
  // 这里一定要返回Promise   不返回页面报错   官方说的返回true和false好像没用
  return new Promise((resolve, reject) => {
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      delUploadImage({ path: newPath })
      // 重点来了   这里操作完以后  一定一定要resolve出去，因为这样avue会将原来的数据给清除  如果不resolve，那么再添加图片的话  他会把得到的路径与之前的拼接成一个字符串用“，”分割
      resolve()
    }).catch(() => {
    // 这里也一定一定要reject，虽然不搞 看似好像没问题  保险起见还是给写上，毕竟我不想再爬坑了 哈哈哈
      reject()
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
    })
  })
},

小白的一些小心得，希望大家少爬坑呀。