181 lines
3.9 KiB
Vue
181 lines
3.9 KiB
Vue
<!-- 照片采集 -->
|
||
<template>
|
||
<view class="Photo">
|
||
|
||
<view class="Picture_box" @tap="choosePic">
|
||
<text v-if="!photo" class="Picture_text">图片上传</text>
|
||
<image v-if="photo" :src="photo" mode=""></image>
|
||
</view>
|
||
|
||
<button class="Picture_button" @tap="submitOwnPhoto">上传图片</button>
|
||
|
||
<!-- 报错显示 -->
|
||
<u-toast ref="uToast"></u-toast>
|
||
<!-- 上传后加一段动画 -->
|
||
<zero-loading v-if="loading"></zero-loading>
|
||
<FloatBall />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
//接口：
|
||
//本地存储接口
|
||
//获取个人信息接口
|
||
|
||
//图片上传接口
|
||
import {
|
||
getOwnPhoto, //获取新生照片
|
||
submitOwnPhoto //上传新生照片
|
||
} from "@/api/photo.js";
|
||
|
||
import {
|
||
isEmpty
|
||
} from '../../api/helpFunc';
|
||
//自定义组件
|
||
import FloatBall from "@/pages/compoents/FloatBall.vue";
|
||
//
|
||
export default {
|
||
components: {
|
||
FloatBall
|
||
},
|
||
data() {
|
||
return {
|
||
photo: null, //图片文件(base64编码)
|
||
loading: false //上传动画
|
||
}
|
||
},
|
||
async onLoad() {
|
||
this.loading = true
|
||
await this.getOwnPhoto();
|
||
this.loading = false
|
||
},
|
||
methods: {
|
||
//用户选择图片
|
||
choosePic: async function() {
|
||
//获取本地图片并且展示
|
||
let that = this;
|
||
uni.chooseImage({
|
||
count: 1, //图片选择一张
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
// 保存图片路径
|
||
//this.photo=res.tempFilePaths[0];
|
||
|
||
let tempImgPath = res.tempFilePaths[0];
|
||
|
||
//修改图片编码
|
||
//将图片路径转换为 Blob 对象
|
||
fetch(tempImgPath)
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
// 修改图片编码
|
||
let reader = new FileReader();
|
||
reader.onload = function(event) {
|
||
that.photo = event.target.result;
|
||
//console.log(that.photo);
|
||
};
|
||
// 读取文件并将其转换为 Base64 编码
|
||
reader.readAsDataURL(blob);
|
||
// 读取文件并将其转换为 UTF-8 编码的文本格式
|
||
//reader.readAsText(blob, 'UTF-8');
|
||
})
|
||
.catch(err => {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: '获取文件失败:' + err.message,
|
||
duration: 1500
|
||
});
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: '选择图片失败:' + err.message,
|
||
duration: 1500
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//新增图片到服务器
|
||
async submitOwnPhoto() {
|
||
let sdata = {
|
||
//表单数据
|
||
// 照片(base64编码)：photo
|
||
photo: this.photo,
|
||
}
|
||
//表单数据判定
|
||
if (isEmpty(sdata.photo)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: '请选择图片',
|
||
duration: 1500
|
||
});
|
||
return;
|
||
}
|
||
//动画显示
|
||
this.loading = true;
|
||
let res = await submitOwnPhoto(sdata);
|
||
this.loading = false;
|
||
if (res.code == 200) {
|
||
this.$refs.uToast.show({
|
||
type: "success",
|
||
message: res.msg,
|
||
duration: 1500,
|
||
});
|
||
} else {
|
||
console.log(res.msg);
|
||
this.$refs.uToast.show({
|
||
type: "error",
|
||
message: res.msg,
|
||
duration: 1500,
|
||
});
|
||
}
|
||
},
|
||
//从服务器获得新生照片照片
|
||
async getOwnPhoto() {
|
||
let that = this;
|
||
let res = await getOwnPhoto(); //连接服务器传入照片id
|
||
if (res.code == 200) {
|
||
if (!isEmpty(res.data)) {
|
||
let data = {
|
||
...res.data
|
||
};
|
||
that.photo = data.photo;
|
||
}
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.Photo {
|
||
flex: 1;
|
||
|
||
.Picture_box {
|
||
height: 60vh;
|
||
margin: 10%;
|
||
border: 2px dashed gray;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.Picture_text {
|
||
font-size: 45rpx;
|
||
writing-mode: vertical-rl;
|
||
text-orientation: upright;
|
||
color: #c5c5c5;
|
||
}
|
||
|
||
image {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.Picture_button {
|
||
margin: 10%;
|
||
}
|
||
}
|
||
</style> |