uni-app 使用API中的uni.chooseImage 上传照片以及uni.previewImage图片预览（身份证照片为例）
<p>在uni-app项目中通常需要用户上传照片，如下图所示：<br><img src="https://img2020.cnblogs.com/blog/2348167/202108/2348167-20210804154016262-920754676.png"><img src="https://img2020.cnblogs.com/blog/2348167/202108/2348167-20210804154749669-377364367.png"></p>
<p>其中部分参数为本项目中请求接口时所需要的，可以根据需求自行修改对应的参数等，代码如下：</p>
<pre><code><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:
})
return
}
this.$http.uniApi({
events: uni.chooseImage
}, {
count: 1,
sizeType: ['original', 'compressed']
}).then(res => {
this.$http.upLoad({
img: res.tempFilePaths,
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>
</code></pre>
<p>通过以上的设置就可以完整的实现身份证照片上传以及图片的预览</p><br><br>
来源：https://www.cnblogs.com/jimyking/p/15099277.html
頁:
[1]