vant使用van-uploader后台接口返回阿里云链接回显图片

html：

<van-uploader :after-read="onRead" accept="image/gif, image/jpeg, image/png" v-model="fileList" :max-count="1"></van-uploader>

js：

data: {
        fileName: '',
		filePath: '',
		fileList: []
	},

// 读取文件
		onRead(file) {
			let that = this;
			let img = new Image();  //创建对象，这个img就是传给上面的compress
			img.src = file.content
			let reader = new FileReader()
			that.fileName = file.file.name;
			reader.readAsDataURL(file.file)
			img.onload = function () {//回调
				let id_card = that.compress(img)//这个id_card就是压缩后的一串base64代码，目测3M图片压缩后800kb
				//这下面写接口，这里传base64格式给后台
				const formData = new FormData()
				// 转化成png格式
				const nameImg = new Date().getTime() + '.png'
				formData.append('picture', that.dataURLtoBlob(id_card), nameImg)
				that.filePath = id_card
			}
		},
		// 压缩图片
		compress(img) {
			let url = ''
			var w = Math.min(700, img.width);//当图片像素>700的时候，等比例压缩，这个数字可以调
			var h = img.height * (w / img.width);
			var canvas = document.createElement('canvas')
			var ctx = canvas.getContext('2d')
			canvas.width = w
			canvas.height = h
			ctx.drawImage(img, 0, 0, w, h)
			url = canvas.toDataURL('image/png', 1)//1代表精细度，越高越好
			return url
		},
		// base64转Blob
		dataURLtoBlob(dataurl) {
			var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new Blob([u8arr], { type: mime });
		}

上面是上传的代码

下面是后台返回阿里云链接进行页面回显：

			app.post('ec.todoFeedBackService', "getTodoFeedBack", {
				'head': {},
				'body': {
					'token': token
				}
			}).then(function (res) {
				var data = res.body;
				if (data.bizCode === '00') {
					let fileUrl = data.fileUrl;//这是后台返回的阿里云链接
					if (fileUrl) {
						_this.fileList.push({ url: fileUrl });需要放置到fileList里才可以回显
					}
				}
			});