vant vue单张图片上传

上传组件

 <template #input>
   <van-uploader accept="file" :max-count="1" v-model="photo" :after-read="afterPhoto" />
 </template>

data

data() {
	return {
		photo: [],
	}
},

事件绑定，组装成file文件

 afterPhoto(file) {
    const tempFile = file.file
    const type = tempFile.type
    const size = tempFile.size
    const newName = new Date().getTime() + tempFile.name
    let uploadFile = new File([tempFile], newName, {
      type,
      size
    })
    let formData = new FormData()
    formData.append('image', uploadFile)
    this.$axios.post(this.apiUrl + '/php/upload', formData)
      .then((res) => {
        this.photo.url = this.apiUrl + res.data.data.image
      })
      .catch((err) => {
        console.log(err);
      });
  },