pet-front-order/pages/personalCenter/components/uploadComponent.vue

<template>
	<view class="">
		<u-upload 
			accept="image" 
			:capture="['album', 'camera']" 
			:fileList="fileList" 
			@afterRead="afterRead"
			@delete="deletePic" 
			:max-count="1" 
			name="pet" width="60" 
			height="60">
			<image src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/image.png" style="width: 60px;height: 60px;">
			</image>
		</u-upload>
	</view>
</template>

<script>
import { currentUrl } from '@/utils/getUrl'
export default{
	data(){
		return{
			fileList:[]
		}
	},
	props:{
		imageUrl:{
			type:String,
			default:''
		}
	},
	mounted(){
		if(this.imageUrl){
			this.fileList=[{url:this.imageUrl}]
		}else{
			this.fileList=[]
		}
		
	},
	methods:{
		// 删除图片
		deletePic(event) {
			this.fileList.splice(event.index, 1)
			this.$emit('update:imageUrl', '');
		},
		
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this.fileList.length
			lists.map((item) => {
				this.fileList.push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			
			const result = await this.uploadFilePromise(lists[0].url)
			if(result){
				this.fileList[0].status='success'
				this.fileList[0].message=''
				this.fileList[0].url=result
			} 
			this.$emit('update:imageUrl', this.fileList[0].url);
			// for (let i = 0; i < lists.length; i++) {
			// 	const result = await this.uploadFilePromise(lists[i].url)
			// 	let item = this.fileList[fileListLen]
			// 	this.fileList.splice(fileListLen, 1, Object.assign(item, {
			// 		status: 'success',
			// 		message: '',
			// 		url: result
			// 	}))
			// 	fileListLen++
			// }
			
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: `${currentUrl}/h5/oss/upload`,
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							if(res&&res.data){
								let resData = JSON.parse(res.data);
								resolve(resData.url);
							}
							reject("上传失败");
						}, 1000)
					},
					
				});
			})
		},
	}
}
</script>

<style></style>