<template>
<view class="" style="padding: 10px;">
<view class="uploadstyle" @click="addPicture" v-if='tempFilePathsEditor.length == 0'>
<image src="../../static/img/unloadPho.png" mode="" style="width: 150upx;height: 150upx;"></image>
<view class="" style="color: #999;font-size: 35upx;">
上传人脸认证识别
</view>
</view>
<view class="" style="font-size: 35upx;font-weight: 700;margin-top: 20upx;border-top: 1px solid #f6f6f6;
box-shadow: 0px 0px 20px rgba(28, 41, 146, 0.1);height: 100%;padding: 30upx 0;"
v-if="tempFilePathsEditor.length!=0">
<text style="font-weight: 700;padding: 30upx 0;">我的照片</text>
<view class="upload-border" style="position: relative;">
<view class="upload-border" v-for="(item, index) in tempFilePathsEditor" :key="index"
style="margin-bottom: 100upx;;position: relative;" v-if="tempFilePathsEditor.length!= 0">
<image :src=item style="width: 100%;" mode="widthFix"></image>
</view>
<image :src=imgUrl mode="" style="position: absolute;top:0px;right: 0px;width: 80upx;height: 80upx;z-index: 999;"
@click.stop="changePho" ></image>
</view>
</view>
</view>
</template>
<script>
import http from '../../../common/http.js';
import {mapState} from 'vuex'
export default {
computed:{
...mapState(['facePhotos'])
},
data() {
return {
tempFilePathsEditor: [],
newUrl: '',
showUnload: true,
imgUrl:'../../static/img/change.png'
}
},
onLoad() {
console.log('facePhotos:onLoad')
var checkingItem = uni.getStorageSync('facePhotos');
console.log(checkingItem)
this.tempFilePathsEditor.push(checkingItem)
},
methods:{
changePho() {
var that = this
uni.showModal({
title: '提示',
content: '是否删除?',
success: res => {
if (res.confirm) {
that.showUnload = false
that.tempFilePathsEditor.length = 0
that.tempFilePathsEditor = []
that.newUrl = ''
// uni.clearStorage();
} else if (res.cancel) {
}
}
})
},
addPicture() {
var that = this
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera','album'], //从相册选择
success: function(res) {
// console.log("修改图片" + JSON.stringify(res))
for (var n = 0; n < res.tempFilePaths.length; n++) {
// console.log("http.baseUrl + '/api/test/upload'=" + http.baseUrl + '/api/test/upload')
uni.uploadFile({
url: http.baseUrl + '/api/test/upload',
filePath: res.tempFilePaths[n],
name: 'file',
formData: {},
success: function(res) {
console.log('res=' + JSON.stringify(res))
if (JSON.parse(res.data).code == 0) {
that.tempFilePathsEditor.push(JSON.parse(res.data).data.url)
console.log('that.tempFilePathsEditor=',that.tempFilePathsEditor)
try {
uni.setStorageSync('facePhotos', that.tempFilePathsEditor[0]);
} catch (e) {
// error
}
// uni.setStorage('facePhotos',JSON.parse(res.data).data.url);
// console.log(uni.setStorage('facePhotos',JSON.parse(res.data).data.url))
}
}
})
}
},
error: function(e) {
console.log(e);
}
})
}
}
}
</script>
<style>
.uploadstyle {
background-color: #f6f6f6;
text-align: center;
padding: 160upx 0;
border-radius: 20upx;
/* box-shadow: 0px 0px 20px rgba(28, 41, 146, 0.1); */
}
</style>
实现了上传图片,显示图片,删除图片,并存到本地。
一个小案例,希望能给予帮助。