阿里云OSS上传图片实现流程

前置，在阿里云开通OSS对象储存。然后在下图文件管理配置文件储存目录和图中传输管理配置访问域名。

1.复制 uploadFileUtil 文件夹和 uploadFile.js 文件在 util 文件夹

2.在使用的页面 引入 uploadFile

效果图：

实现代码

<template>
	<view class="quiz">
		<view class="title">
			请选择你要提问的领域
		</view>
		<picker @change="bindPickerChange" :range="arr">
			<view class="xuanzhe">
				<img @click="" class="rrr" src="@/static/image/rrr.png" />
				{{faq_val||arr[0]}}
			</view>
		</picker>
		<view class="title title2">
			请输入您想要提问的问题
		</view>
		<textarea class="textarea1" v-model="title" placeholder-style="color:#d0d0d0" placeholder="请输入问题的标题" />
		<textarea class="textarea2" v-model="introduce" placeholder-style="color:#d0d0d0" placeholder="请输入问题的具体描述" />

		<view class="title title3">
			请拍照或上传图片帮我们更好的解答问题
		</view>

		<!-- 添加图片 -->
		<view class="mainAddpic">
			<p class="addPic">
				<span>添加图片</span>
				<span>（可添加1-5张图片）</span>
			</p>
			<view class="ThreePic">
				<block v-for="item in uploadimageArr" :key="">
					<view class="picMore">
						<image v-if="item" :src="delet" mode="widthFix" class="delete" @click="detete(0)" />
						<image v-if="item" :src="item" class="add1" />
						<image class="addPic1" v-else :src="add" @click="addPic" />
					</view>
				</block>
				<img class="picMore" v-if="uploadimageArr.length<5" @click="addPic()" :src="quiz_upImg" />
			</view>
		</view>

		<view class="btn" @click="btn()">
			我要提问
		</view>
	</view>
</template>

<script>
	import uploadImage from "@/util/uploadFile";
	// 请求话题接口 拿到提问领域，然后请求用户发帖 userSendForum  上传图片用上海的oss
	import Search from '@/components/search.vue';
	var that;
	export default {
		components: {
			Search
		},
		data() {
			return {
				delet: this.$config.nhsImagesUrl + "apply/applyClosed.png",
				add: this.$config.ibugooImageUrl + "addImg.png",
				quiz_upImg: this.$config.dadaImagesUrl + 'quiz_upImg.png',
				type: 'FeedBack',
				lists: [],
				arr: [],
				faq_val: '',
				title: '1',
				introduce: '2',
				files: [],
				uploadimageArr: [],
				cdnImages: [],
			};
		},
		onLoad() {
			that = this;
			this.$common.Init.call(this);
			this.topicLists();
		},
		methods: {

			// 添加图片
			addPic(e) {
				const length = this.uploadimageArr.length;
				if (length >= 5) return;
				uni.chooseImage({
					count: 5 - length,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						var tempFilePaths = res.tempFilePaths;
						that.uploadimageArr = [...that.uploadimageArr, ...res.tempFilePaths];
					},
				});
			},

			// 删除选中图片
			detete(e) {
				this.uploadimageArr = this.uploadimageArr.filter((item, index) => {
					return index != e;
				});
			},
			btn() {
				let cdnImages = new Array(that.uploadimageArr.length);
				cdnImages = cdnImages.fill("").map((value, index) => {
					return new Promise((resolve, reject) => {
						uploadImage.uploadFile(
							that.uploadimageArr[index],
							`dadaDepot/${new Date().getTime() + Math.floor(Math.random() * 150)}`,
							function(resl) {
								console.log("======上传成功图片地址为：", resl,'网络路径')
								resolve(resl);
								uni.hideLoading()
							},
							function() {
								uni.hideLoading()
							}
						)
					})
				})
				Promise.all(cdnImages).then((res) => {
					console.log('上传成功',res)
				}).catch((err) => {
					that.showSignFlag = false;
				});
			},
			topicLists() {
				var data = {
					type: this.type
				}
				this.$request(this.$api.community.topicLists, data).then((res) => {
					this.lists = res.data.lists || [];
					this.arr = this.lists.map(item => item.title)
				});
			},
			bindPickerChange(e) {
				this.faq_val = this.arr[e.detail.value];
				console.log(this.faq_val)
			},
			quxiao(item, index, type) {
				this.setCollection(item, index, type);
				setTimeout(() => {
					this.userCollectList();
				}, 1000)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.quiz {
		margin: 36rpx;
		position: relative;
		color: #102841;

		.mainAddpic {
			width: 100%;
			padding: 40rpx 28rpx 50rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;

			.ThreePic {
				display: flex;
				// justify-introduce: space-around;
				flex-wrap:wrap
			}

			.addPic {
				width: 100%;
				padding-left: 10rpx;
				padding-bottom: 10rpx;
				border-bottom: 1px solid #E5F1FF;

				span:nth-child(1) {

					font-family: PingFangSC-Medium, PingFang SC;
					font-size: 28rpx;
					color: grey;
					font-weight: bold;
				}

				span:nth-child(2) {
					font-size: 24rpx;
					color: #999;
				}
			}

			.picMore {
				width: 190rpx;
				height: 190rpx;
				border-radius: 8rpx;
				display: flex;
				margin: 30rpx auto 10rpx;
				position: relative;
				// border: 1px dashed #ccc;
				

				image {
					width: 88rpx;
					height: 88rpx;
					margin: 0 auto;
				}

				.add1 {
					width: 186rpx;
					height: 186rpx;
					border-radius: 8rpx;
				}

				.delete {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 2;
					width: 40rpx;
				}

				.addPic1 {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.quiz_upImg {
			width: 212rpx;
			height: 212rpx;
			position: relative;
			left: 50%;
			margin-left: -106rpx;
			margin-top: 40rpx;
		}

		.title {
			// height: 100rpx;
			position: relative;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
		}

		.title2 {
			margin-top: 80rpx;
		}

		.title3 {
			margin-top: 60rpx;
		}

		.xuanzhe {
			position: relative;
			top: 22rpx;
			padding: 24rpx;
			background: #fcfcfc;
			border-radius: 14rpx;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);

			.rrr {
				width: 12rpx;
				height: 22rpx;
				position: absolute;
				right: 30rpx;
				margin-top: 10rpx;
				z-index: 3;
			}
		}

		textarea {
			position: relative;
			top: 22rpx;
			padding: 24rpx;
			background: #fcfcfc;
			border-radius: 14rpx;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);
		}

		.textarea1 {
			height: 70rpx;
		}

		.textarea2 {
			margin-top: 26rpx;
			height: 200rpx;
		}

		.btn {
			position: absolute;
			margin: auto;
			margin-top: 34rpx;
			border-radius: 24rpx;
			height: 80rpx;
			line-height: 80rpx;
			width: 240rpx;
			left: 50%;
			margin-left: -120rpx;
			background-color: #102841;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
		}

		.list {
			margin-top: 40rpx;

			.item {
				width: 90%;
				padding-bottom: 0rpx;
				min-height: 80rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);
				border-radius: 12rpx;
				margin: auto;
				position: relative;
				margin-bottom: 28rpx;

				.red_point {
					margin-top: -6rpx;
					margin-right: 14rpx;
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: red;
					position: absolute;
					right: 4rpx;
				}

				.txt {
					line-height: 96rpx;
					// height: 36rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #102841;
					margin-left: 30rpx;
					width: 470rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

			}
		}
	}
</style>