uniapp中图片上传七牛云

<template>
	<view>
		<view class="list-ul">
			<view class="list-li" v-if="show" @click="onUpload()">
				<view class="add-photo">
					<!-- <image src="/static/collectClothes/add.png" mode=""></image> -->
					<uni-icons type="camera" size="30"></uni-icons>
					<text>可再加{{ 6 - PhotoModelList.length }}张</text>
				</view>
			</view>
			<view class="list-li" v-for="(item, index) in PhotoModelList" :key="index">
				<view class="delete" v-if="show" @click="deleteImg(index)">
					<uni-icons type="close" size="20"></uni-icons>
				</view>
				<image :src="item.Src" mode="" @click="lookImg(item)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "@/utils/http.js";
	import Json from "@/Json.js";
	export default {
		props: {
			PhotoModelList: {
				type: Array,
				default: () => [],
			},
			show: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {};
		},
		methods: {
			// 查看图片
			lookImg(item) {
				console.log(item);
				// uni.previewImage({
				//   current: item,
				//   urls: this.PhotoModelList,
				// });
				uni.previewImage({
					urls: this.PhotoModelList.map((item) => item.Src),
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						indicator: "default",
						success: function(data) {
							console.log(
								"选中了第" +
								(data.tapIndex + 1) +
								"个按钮,第" +
								(data.index + 1) +
								"张图片"
							);
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
			// 删除图片
			deleteImg(index) {
				let _PhotoModelList = this.PhotoModelList.filter((v, i) => {
					return i != index;
				});
				this.$emit("photo_change", _PhotoModelList);
			},
			// 上传图片
			onUpload() {
				if (this.PhotoModelList.length >= 6) {
					uni.showToast({
						title: "最多可添加六张图片",
						icon: "none",
					});
				} else {
					uni.chooseImage({
						count: 1, // 默认9
						sizeType: ["compressed", "original"],
						sourceType: ["album", "camera"],
						success: async (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.showLoading({
								title: "加载中",
								mask: true,
							});
							let res = await http.get(
								`${Json.serve}/qiniu/token`
							);
							console.log(res);
							if (res.errno == 0) {
								console.log(res);
								let token = res.data.token; //token为七牛云的token一般由后台接口提供
								let cdn_url = res.data.cdn_url; //七牛云的域名
								let key = "userinfo/lxwsh" + new Date().getTime() + Math.random() +
									".png"; //key为自定义文件名
								let filePath = tempFilePaths[0]; //要上传的图片的路径
								// 上传到七牛云
								uni.uploadFile({
									url: "https://up-z1.qiniup.com",
									filePath: tempFilePaths[0], //要上传的图片的路径
									name: "file",
									formData: {
										key: key, //上传成功以后，即为图片的名字
										token: token, //后台获取回来的token
									},
									success: (uploadFileRes) => {
										let _uploadFileRes = JSON.parse(uploadFileRes.data);
										if (_uploadFileRes) {
											let url = cdn_url + "/" + _uploadFileRes
												.key; //将七牛云域名与key连接起来就是图片的路径
											let imgData = {
												Id: key,
												Name: _uploadFileRes.key,
												Src: url,
											};
											this.PhotoModelList.push(imgData);
											console.log("图片", this.PhotoModelList);
											this.$emit("photo_change", this.PhotoModelList);
										}
									},
									fail: (err) => {
										console.log("fail", err);
									},
								});
							} else {
								uni.hideLoading();
								uni.showToast({
									title: res.message,
									icon: "none",
								});
							}
						},
					});
				}
			},
		},
		created() {
			this.baseUrl = uni.getStorageSync("baseUrl");
			// console.log("图片组件",this.PhotoModelList);
		},
	};
</script>

<style scoped lang="scss">
	.list-ul {
		width: 100%;
		height: auto;
		// display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		// padding: 30rpx;
		box-sizing: border-box;
		overflow: hidden;

		.add-photo {
			width: 110rpx;
			height: 110rpx;
			margin: auto;
			border-radius: 10rpx;
			// box-shadow: 0px 0px 10px rgba(0,0,0,.1);
			background: #f6f7f9;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				display: block;
				width: 40rpx !important;
				height: 40rpx !important;
			}

			text {
				font-size: 19rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.list-li:nth-child(4n) {
			margin-right: 0rpx;
		}

		.list-li {
			width: 110rpx;
			// width: 158rpx;
			// margin-top: 34rpx;
			margin-bottom: 15rpx;
			margin-right: 13rpx;
			float: left;
			position: relative;
			border-radius: 12rpx;

			.delete {
				width: 40rpx;
				height: 40rpx;

				color: #fff;
				text-align: center;
				line-height: 40rpx;
				position: absolute;
				top: 0rpx;
				right: 0rpx;

			}

			image {
				width: 110rpx;
				height: 110rpx;
				border-radius: 12rpx;

			}
		}
	}
</style>