uniapp实现图片上传及回显

此组件只适用于小程序，不兼容app
组件参考：zh.uniapp.dcloud.io/component/u…

html

<uni-file-picker limit="4" v-model="baseFormData.fileList" @select="select" @delete="deleteImg">
</uni-file-picker>

js

const baseFormData = ref({
		name: '',
		phone: '',
		building: '',
		floor: '',
		address: '',
		product: '',
		assignDesc: '',
		fileList: [],
	})
const select = (e) => {
		const tempFilePaths = e.tempFilePaths[0]
		if (tempFilePaths) {
			const token = uni.getStorageSync('token');
			uni.uploadFile({
				url: 'http://XXX/file/static',//接口地址
				filePath: tempFilePaths,
				name: 'file',
				header: {
					"x-access-token": token
				},
				success: (uploadFileRes) => {
					let data = JSON.parse(uploadFileRes.data);
					let imgData = {
						"extname": "txt",
						'name': 'img',
						'url': data.result
					}
					baseFormData.value.fileList.push(imgData)
				}
			})
		}
	}
const deleteImg = (e) => {
		let fileListArr = [...baseFormData.value.fileList]
		fileListArr.splice(e.index, 1)
		baseFormData.value.fileList = [...fileListArr]
	}