uni.chooseImage({
	count: 6, //默認(rèn)9
	sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
	sourceType: ['album'], //從相冊(cè)選擇
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

<template>
	<view>
		<view class="add-cover" @click="upload">
			<!-- 這里使用 :src="cover"  將src動(dòng)態(tài)賦值-->
			<image class="cover" :src="cover" mode="aspectFill"></image>
			<view class="default">
				<image src="../../../static/add.png" class="add-icon"></image>
				<!-- 沒(méi)有上傳圖片時(shí)狀態(tài)是添加，上傳版完畢是切換 -->
				<text>點(diǎn)擊{{cover?'切換':'添加'}}封面</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cover: ''
			};
		},
		methods: {
			// 方式一：使用箭頭函數(shù)
			upload() {
				uni.chooseImage({
					count: 1, //默認(rèn)9,這里設(shè)置只允許選擇一張圖片
					sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
					sourceType: ['album'], //這里選擇從相冊(cè)選擇，也可刪除此項(xiàng)設(shè)置默認(rèn)拍照和相冊(cè)兩種選擇
					success: res => {
						// 實(shí)際開發(fā)中，成功的回調(diào)函數(shù)中是一個(gè)上傳圖片到服務(wù)器的接口，這里只是做了簡(jiǎn)單的效果，實(shí)際根據(jù)接口需要的參數(shù)格式進(jìn)行上傳
						// console.log(JSON.stringify(res.tempFilePaths)); 打印的結(jié)果是以數(shù)組方式返回的，所以我們只需要取第一個(gè)值：["blob:http://localhost:8080/c18cded6-ab83-4d0e-9ccd-ce2e402b7d3f"] 
						this.cover = res.tempFilePaths[0] // 將選擇的圖片賦值給我們定義的cover
					}
				});
			}
			
			
			// 方式二：不使用箭頭函數(shù)（不使用箭頭函數(shù)就需要定義變量去賦值this,如下_this）
			// upload() {
			// 	var _this = this
			// 	uni.chooseImage({
			// 		count: 1, //默認(rèn)9,這里設(shè)置只允許選擇一張圖片
			// 		sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
			// 		sourceType: ['album'], //這里選擇從相冊(cè)選擇，也可刪除此項(xiàng)設(shè)置默認(rèn)拍照和相冊(cè)兩種選擇
			// 		success: function(res) {
			// 			_this.cover = res.tempFilePaths[0]
			// 		}
			// 	});
			// }
		}
	}
</script>

<style lang="scss">
	.cover {
		width: 100%;
		height: 350rpx;
	}

	.default {
		background-color: #f8f9fc;
		width: 100%;
		height: 350rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: red;
		font-weight: 800;
		position: absolute;
		top: 0;
		background-color: rgba(255, 255, 255, 0.2);
	}

	.add-icon {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 20rpx;
	}
</style>