在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>
通过以上的设置就可以完整的实现身份证照片上传以及图片的预览