medical/conponents/upload/upImage.vue

<template>
	<view>
		<u-upload
			:fileList="fileList3"
			@afterRead="afterRead"
			@delete="deletePic"
			name="3"
			multiple
			:maxCount="9"
			:previewFullImage="true"
			style="margin-top: 30rpx"
			:multiple='true'
		>
			<template>
				<view class="upImage">
					<u-icon name="plus" color="#8C8C8C" size="49rpx"></u-icon>
				</view>
			</template>
		</u-upload>
		
		<u-loading-page :loading="loading" loading-text="加载中" bg-color="rgba(0,0,0,0.60)" style="z-index: 999999;"></u-loading-page>
	</view>
</template>

<script>
	export default {
		props: {
			img: {
				type: Array,
				default: [],
			}
		},
		data(){
			return {
				fileList3: [],
				loading: false,
			}
		},
		watch: {
			img() {
			      console.log(this.img)
				  this.fileList3 = this.img
			    },
		},
		
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.$emit('addImg', this.fileList3)
			},
			
			// 新增图片
			async afterRead(event) {
				this.loading = true
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				console.log(event, 'event', lists, fileListLen)
				for (let i = 0; i < lists.length; i++) {
					console.log('w')
					 this.uploadFilePromise(lists[i].url)
					// const result = await this.uploadFilePromise(lists[i].url)
					// let item = this[`fileList${event.name}`][fileListLen]
					// this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					// 	url: result
					// }))
					fileListLen++
				}
				console.log(this.fileList3)
				setTimeout(()=>{
					this.loading = false
				}, 1000)
			},
			
			uploadFilePromise(url) {
				// let token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0ZW5hbnRfaWQiOiIwMDAwMDAiLCJ1c2VyX25hbWUiOiJhZG1pbiIsInJlYWxfbmFtZSI6IueuoeeQhuWRmCIsImF2YXRhciI6Imh0dHA6Ly9odWF5dWFuc2hhbnNoaS5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL3VwbG9hZC8yMDIwMTEyMC9kYmZkNDU3OGNiMzkyZWYwOWEwNGY2MjFlZWU5NTM1NC5wbmciLCJhdXRob3JpdGllcyI6WyJhZG1pbmlzdHJhdG9yIl0sImNsaWVudF9pZCI6InNhYmVyIiwicm9sZV9uYW1lIjoiYWRtaW5pc3RyYXRvciIsImxpY2Vuc2UiOiJwb3dlcmVkIGJ5IGJsYWRleCIsInBvc3RfaWQiOiIxMTIzNTk4ODE3NzM4Njc1MjAxIiwidXNlcl9pZCI6IjExMjM1OTg4MjE3Mzg2NzUyMDEiLCJyb2xlX2lkIjoiMTEyMzU5ODgxNjczODY3NTIwMSIsInNjb3BlIjpbImFsbCJdLCJuaWNrX25hbWUiOiLnrqHnkIblkZgiLCJvYXV0aF9pZCI6IiIsImV4cCI6MTY3Mjc2ODQwMCwiZGVwdF9pZCI6IjExMjM1OTg4MTM3Mzg2NzUyMDEiLCJqdGkiOiJlYWFmNGE0NC1kMzQxLTQzMjgtYTQ0Ny1hNDg1MjE0YTJhZmEiLCJhY2NvdW50IjoiYWRtaW4ifQ.MDACOyjbHZDr_GyB0P9jtGahVOt4_-QKe7CK8m2eUsg'
				let token = localStorage.getItem("access_token");
				var header = {
				    Authorization: 'Bearer ' + 'c2FiZXI6c2FiZXJfc2VjcmV0',
				};
				if (token) {
				    header['Blade-Auth'] = "bearer " + token;
				}
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${this.$api.img}`, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: header,
						formData: {
						},
						success: (res) => {
							let url = JSON.parse(res.data)
							console.log(url)
							this.fileList3.push({
								url: url.data.link
							})
							console.log('w', this.fileList3)
							this.$emit('addImg', this.fileList3)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.upImage{
		width: 142rpx;
		height: 142rpx;
		border-radius: 16rpx;
		border: 2rpx solid #d9d9d9;
		display: flex;
		justify-content: center;
	}
	
</style>