uni-file-picker 上传图片至服务器

<template>
	<view class="box">
		<view class="custom-title-box">
			<view class="status-bar-height-box" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="title-box" :style="{height: titleHeight + 'px'}">
				<uni-icons type="back" class="left" size="30" color="#fff" @click="back()"></uni-icons>
				发布
			</view>
		</view>
		<view class="empty-box" :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<view class="wrap-two">
			<textarea class="input" @input="bindTextAreaBlur" placeholder="记录美好瞬间~" :value="content" maxlength="1000" />
			<view class="text">{{length}}/1000字</view>
		</view>
		<view class="up">
			<uni-file-picker limit="9" @select="select" @success="success" @progress="progress" :auto-upload="true"
				fileMediatype="image" title="最多选择9张图片" mode="grid" v-model="imageValue"></uni-file-picker>
		</view>
		<view class="titlelist">
			<view class="title">
				<image src="../../static/img/select.png" mode=""></image>
				<view class="text">话题 <text class="span">添加一个话题吧，让更多人看到~（最多添加五个）</text></view>
			</view>
			<view class="btn" @click="isShow=1">
				+ 添加
			</view>
		</view>
		<view class="tags">
			<view class="item" v-for="(item,index) in taglist" :key="index">
				#{{item.name||"无"}} <uni-icons type="closeempty" color="#fff" size="12"
					@click="taglist.splice(index,1)"></uni-icons>
			</view>
		</view>
		<view class="button-wrap">
			<view class="canel" @click="back">
				取消
			</view>
			<view class="go" @click="uploadImages()">
				发布
			</view>
		</view>
		<view class="mask" v-show="isShow" @click="isShow=0">
			<view class="pp" @tap.stop>
				<uni-icons type="closeempty" class="close" @click="isShow=0"></uni-icons>
				<view class="title1">
					添加话题
				</view>
				<input type="text" :value="tag" @input="gettag" placeholder="最多不超过5个字" maxlength="5" />
				<view class="button" @click="add">
					添加
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		myRequest,
		baseURL
	} from '../../api';
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				titleHeight: 0, // 标题栏高度
				content: "",
				length: 0,
				imageValue: [
					{
						name:"",
						path:"http://tmp/HoMUSHGao2Xdf9c107669734cd1cb61af4393e7c4ef0.jpg",
						url:"http://tmp/HoMUSHGao2Xdf9c107669734cd1cb61af4393e7c4ef0.jpg"
					}
				],
				isShow: false,
				tag: "",
				taglist: [{
						name: '宠物猫'
					},
					{
						name: "心情不错"
					}
				],
				imagelist:[]
			}
		},
		onLoad() {

		},
		onReady() {
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
				}
			})
			const btnInfo = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = (btnInfo.top - this.statusBarHeight) * 2 + btnInfo.height
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			gettag(e) {
				this.tag = e.detail.value
			},
			bindTextAreaBlur(e) {
				this.content = e.detail.value
				this.length = e.detail.value.length
				console.log(e.detail.value.length)
			},
			add() {
				this.taglist.push({
					name: this.tag
				})
				this.tag = ""
				this.isShow = 0
			},
			select(e) {
				this.imageValue.push({
					path: e.tempFilePaths[0],
					url: e.tempFilePaths[0],
					name: ''
				})
				console.log('选择文件：', e)
			},
			progress(e) {
				console(e, "上传中")
			},
			success(e) {

				console.log('上传成功')
			},
			// up() {
			// 	const tempFilePaths = e.tempFilePaths[0];

			// },
			async uploadImages() {
				  for (const image of this.imageValue) {
				    await this.uploadImage(image.path);
				  }
			},
			async  uploadImage(imagePath) {
			  // 将图片路径转化为 uni-app 的临时文件路径
			  const tempFilePath = await uni.getImageInfo({
			    src: imagePath
			  }).then(info => info.path);
			
			  // 上传临时文件到服务器
			  console.log(`Uploading image: path=${imagePath}`);
			  const response = await uni.uploadFile({
						url: baseURL + "?s=/ApiImageupload/uploadImg", //仅为示例，非真实的接口地址
						filePath: tempFilePath,
						name: 'file',
						success: (res) => {
							const img=JSON.parse(res.data).url
							this.imagelist.push({
								url:img
							})
							console.log(JSON.parse(res.data).url)
							// this.isShow=false
							// console.log(this.headimg)
							// console.log(JSON.parse(res.data.info.url),"666");
						}
					});
			  console.log(`Image uploaded: path=${imagePath}, response=${response}`);
			}
		},
	}
</script>
<style lang="scss">
	.custom-title-box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #9263FE;

		.title-box {
			// background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #FFFFFF;

			>image {
				width: 346rpx;
				height: 96rpx;
			}

			.left {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				left: 24rpx;
				bottom: 10rpx;
			}
		}
	}

	.box {
		width: 750rpx;
		// height: 1624rpx;
		background-color: #F8F8F8;
		position: relative;
	}

	.wrap-two {
		width: 750rpx;
		background: #FFFFFF;
		// border-radius: 0rpx 0rpx 0rpx 0rpx;
		// opacity: 0.8;

		.input {
			margin: 0 auto;
			// margin-top: 24rpx;
			width: 710rpx;
			height: 252rpx;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			// border: 1rpx solid rgba(0,0,0,0.15);
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #3d3d3d;
			padding: 20rpx;
			overflow: auto;
			// padding-top: 0rpx;
		}

		.text {
			width: 726rpx;
			text-align: right;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: rgba(61, 61, 61, 0.25);
			padding-right: 24rpx;
		}
	}

	.up {
		width: 702rpx;
		padding: 24rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
	}

	.titlelist {
		width: 750rpx;
		height: 50rpx;
		background-color: #FFFFFF;
		position: relative;

		.title {
			position: relative;
			display: flex;

			>image {
				position: absolute;
				top: 4rpx;
				left: 40rpx;
				width: 45rpx;
				height: 32rpx;
				opacity: 0.6;
			}

			.text {
				position: absolute;
				left: 60rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.span {
				margin-left: 20rpx;
				font-size: 20rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: rgba(61, 61, 61, 0.6);
			}
		}

		.btn {
			width: 84rpx;
			height: 34rpx;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			border: 1rpx solid rgba(51, 51, 51, 0.6);
			font-size: 18rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 0.6);
			text-align: center;
			line-height: 34rpx;
			position: absolute;
			right: 20rpx;
		}
	}

	.tags {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		background-color: #FFFFFF;
		align-items: center;
		border-bottom: 2rpx solid rgba(216, 216, 216, 0.25);

		.item {
			// width: 100rpx;
			height: 40rpx;
			background: rgba(188, 112, 254, 0.9);
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			margin-left: 24rpx;
			font-size: 18rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 40rpx;
			padding: 5rpx;
		}
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 998;

		.pp {
			overflow: hidden;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 702rpx;
			height: 400rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.title1 {
				position: absolute;
				top: 40rpx;
			}

			>input {
				position: absolute;
				top: 128rpx;
				width: 586rpx;
				height: 80rpx;
				background: rgba(216, 216, 216, 0.5);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: rgba(61, 61, 61, 0.3);
				padding-left: 20rpx;
			}

			.button {
				position: absolute;
				top: 258rpx;
				width: 606rpx;
				height: 88rpx;
				background: #9263FE;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
			}

			.close {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}



		}
	}

	.button-wrap {
		position: fixed;
		bottom: 100rpx;
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.canel {
			width: 312rpx;
			height: 88rpx;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			border: 2rpx solid #9263FE;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #9263FE;
			text-align: center;
			line-height: 88rpx;
		}

		.go {
			width: 316rpx;
			height: 92rpx;
			background: #9263FE;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 92rpx;
		}
	}
</style>