vant中使用van-uploader上传图片

van-uploade
对于进行封装为组件< afterSaleImage >

使用方法如下:

其中：
UUIDStr ：随机生成的UUID
imageList：编辑的时候传的图片列表
imageListChange:监听选择图片数组的变化

/*
 * 生成UUID
 */

export const UUID = () => {
  var d = new Date().getTime()
  var uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (d + Math.random() * 16) % 16 | 0
    d = Math.floor(d / 16)
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
  })
  return uuid
}

this.UUIDStr = UUID();
 // --图片
    imageListChange(imageList) {
      this.imageList = imageList;
    },

以下是组件内部的代码

全局的请求接口方法
上传文件的Content-Type是:multipart/form-data

axios.defaults.headers.post['Content-Type'] = 'multipart/form-data;'

 // 上传图片
  fileUpload(params, UUID) {
    return fetchData(baseUrl + '/ec/app/front/unauth/filePtctureController/fileUpload', params, 'post', 'multipart/form-data;', UUID)
  },

切记在拦截器里面要设置一下config

// 拦截器
axios.interceptors.request.use((config) => {
  store.commit('updateLoadingStatus', true)
  if (config.method === 'post' && axios.defaults.headers.post['Content-Type'] === 'multipart/form-data;') {
    return config
  }
  if (config.method === 'post' && axios.defaults.headers.post['Content-Type'] === 'application/x-www-form-urlencoded') {
    config.data = qs.stringify(config.data)
  } else {
    config.data = JSON.stringify(config.data)
  }
  return config

}, (error) => {
  return Promise.reject(error)
})

参考：
https://www.cnblogs.com/wayneliu007/p/10681516.html
https://blog.csdn.net/angle_lzc/article/details/80354228
https://blog.csdn.net/qq_41688165/article/details/80834842