uni-app 使用API中的uni.chooseImage 上傳照片以及uni.previewImage圖片預覽（身份證照片為例）

在uni-app項目中通常需要用戶上傳照片，如下圖所示：

其中部分參數為本項目中請求接口時所需要的，可以根據需求自行修改對應的參數等，代碼如下：

<template>
	<div class="container">
		<div class="user-info">
			<div class="id-info">身份證照片</div>
			<div class="tips">*請上傳本人的身份證照片（單張照片限制1M以內）</div>
			<div>
				<img class="img-info" :src="card_front ? card_front : img_url+'/id-f.png'" @click="upLondImg('cardFront',card_front)">
			</div>
			<div>
				<img class="img-info" :src="card_back ? card_back : img_url+'/id-z.png'" @click="upLondImg('cardBack',card_back)">
			</div>
		</div>
		<div class="user-info item">
			<div class="id-info">個人證件照</div>
			<div class="tips">*請上傳近期白底或藍底免冠正面證件照</div>
			<div>
				<img class="upload" :src="stu_card ? stu_card : img_url+'/jh.png'" @click="upLondImg('personalPhoto',stu_card)">
			</div>
		</div>
		<button class="submit-btn" @click="subBtn" v-if="stu_info.label != 2">提交</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				img_url: this.$http.img_url(),
				img: '',
				Path: {},
				stu_card: '',
				card_back: '',
				card_front: '',
				stu_info: null
			}
		},
		onLoad(option) {
			this.stu_info = JSON.parse(option.photo)
			this.card_front = this.stu_info.card_front
			this.card_back = this.stu_info.card_back
			this.stu_card = this.stu_info.stu_card
		},
		methods: {
			subBtn() {
				if (!this.card_front) {
					uni.showToast({
						title: '請上傳身份證正面照',
						icon: 'none'
					})
					return
				}
				if (!this.card_back) {
					uni.showToast({
						title: '請上傳身份證反面照',
						icon: 'none'
					})
					return
				}
				if (!this.stu_card) {
					uni.showToast({
						title: '請上傳個人證件照',
						icon: 'none'
					})
					return
				}
				this.$http.post('personal/identity', {
					stu_card: this.stu_card,
					card_back: this.card_back,
					card_front: this.card_front
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							success: () => {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1000);
							}
						})
					}
				})
			},
			upLondImg(path,src) {
				if (this.stu_info.label == 2) {
					 uni.previewImage({
						urls: [src]
					})
					return
				}
				
				this.$http.uniApi({
					events: uni.chooseImage
				}, {
					count: 1,
					sizeType: ['original', 'compressed']
				}).then(res => {
					this.$http.upLoad({
						img: res.tempFilePaths[0],
						path: path
					}).then(res => {
						if (path == 'cardFront') {
							this.card_front = JSON.parse(res).data.url
						} else if (path == 'cardBack') {
							this.card_back = JSON.parse(res).data.url
						} else {
							this.stu_card = JSON.parse(res).data.url
						}
					})
				})

			}
		}
	}
</script>

通過以上的設置就可以完整的實現身份證照片上傳以及圖片的預覽