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

港控/mmm° 2022-11-16 05:57 467阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]

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

2.在使用的页面 引入 uploadFile

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1][]

实现代码

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: /images/20221022/4b7ac49a6f1341aba2f47b23d2fe5b77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1]: /images/20221022/79975d866253477c840614d19f6ca282.png