vant中使用van-uploader上传图片

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

使用方法如下:

 <afterSaleImage
      :UUIDStr="UUIDStr"
      :imageList="imageList"
      v-on:imageListChange="imageListChange"
    />

其中：
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;
    },

以下是组件内部的代码

<template>
  <div class="contain">
    <div class="posting-uploader">
      <div
        class="posting-uploader-item"
        v-for="(item, nn) in postData"
        :key="nn"
      >
        <img :src="item.content" alt="图片" class="imgPreview" />
        <van-icon
          name="close"
          src="../../assets/image/icon/icon_delete@3x.png"
          @click="delImg(nn)"
          class="delte"
        />
      </div>
      <van-uploader
        :after-read="onRead"
        :accept="'image/*'"
        v-show=" postData.length <= 2"
        result-type="text"
        v-on:oversize="oversize"
      >
        <img
          src="../../assets/image/icon/defaultImage@3x.png"
          alt="等待传图"
          class="imgPreview"
        />
      </van-uploader>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    UUIDStr: String,
    imageList: Array
  },
  data () {
    return {
      postData: []
    }
  },
  mounted () {
    this.postData = this.imageList
  },
  watch: {
    imageList (value) {
      this.postData = value
    }
  },
  methods: {

    delImg (index) {
      // 删除指定下标的图片对象
      if (isNaN(index) || index >= this.postData.length) {
        return false
      }
      // let param = {
      //   id: this.postData[index].id
      // }
      this.$api.deleteFile(this.postData[index].id).then(res => {
        if (res.code === 0) {
          this.postData.splice(index, 1)
          this.$emit('imageListChange', this.postData)
        }
      })
      // let tmp = []
      // for (let i = 0, len = this.postData.length; i < len; i++) {
      //   if (this.postData[i] !== this.postData[index]) {
      //     tmp.push(this.postData[i])
      //   }
      // }
      // this.postData = tmp
    },
     oversize(){
        this.$toast("图片太大了");
    },
    onRead (file) {
      // console.log(file)
      // console.log(file.content.length)
      let formData = new FormData()
      formData.append('file', file.file)
      this.$api.fileUpload(formData, this.UUIDStr).then(res => {
        if (res.code === 0) {
          file.content = res.data.filePath
          file.businessId = res.data.businessId
          file.createDate = res.data.createDate
          file.id = res.data.id
          this.postData.push(file)
          this.$emit('imageListChange', this.postData)
        }else{
          this.$toast(res.msg);
        }
      })
    }

  }
}
</script>

<style scoped>
.contain {
  margin-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding-top: 10px;
}

.image {
  width: 50px;
  height: 50px;
}
.uploader {
  display: flex;
  flex-direction: row;
}
.posting-uploader {
  display: flex;
  flex-direction: row;
  margin-left: 14px;
}

.posting-uploader-item {
  display: flex;
  flex-direction: row;
}
.imgPreview {
  width: 70px;
  height: 70px;
}
.delte {
  margin-left: -15px;
  width: 10px;
  height: 10px;
  margin-right: 20px;
}
.upload-img-5 {
  margin: 5px 0 90px 0;
}
.upload-img-1 {
  margin: 5px 0 15px 0;
}
</style>

全局的请求接口方法
上传文件的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