Browse Source

upload

master
congzc 1 year ago
parent
commit
cd022dc162
11 changed files with 342 additions and 101 deletions
  1. +1
    -1
      src/App.vue
  2. +34
    -0
      src/api/closeStyle.js
  3. +9
    -0
      src/api/createing.js
  4. +30
    -0
      src/api/uploadphoto.js
  5. +61
    -17
      src/pages/closeStyle/closeStyle.vue
  6. +54
    -10
      src/pages/closeStyle/goCreatePhoto.vue
  7. +40
    -7
      src/pages/createing/index.vue
  8. +1
    -1
      src/pages/login/index.vue
  9. +9
    -47
      src/pages/uploadPhoto/success.vue
  10. +93
    -17
      src/pages/uploadPhoto/uploadPhoto.vue
  11. +10
    -1
      src/utils/request.js

+ 1
- 1
src/App.vue View File

@@ -63,7 +63,7 @@ onLaunch(() => {
uni.hideLoading();
if (res2.data.token) {
uni.redirectTo({
url: "/pages/index/index",
url: "/pages/home/index",
});
} else {
uni.redirectTo({


+ 34
- 0
src/api/closeStyle.js View File

@@ -0,0 +1,34 @@
import request from "../utils/request"

// 获取风格列表
export function getListApi(pageNum, pageSize) {
return request({
url: `api/digitalAvatarMould/list?pageNum=${pageNum}&pageSize=${pageSize}`,
method: 'GET',
})
}

// 根据iD获取详情
export function findByIdApi(id) {
return request({
url: `api/digitalAvatarMould/findById?id=${id}`,
method: 'GET',
})
}

// 查询用户头像照片,生成写真时需要
export function findImageApi() {
return request({
url: `api/userDigital/findImage`,
method: 'GET',
})
}

// 生成写真
export function createPhotoApi(data) {
return request({
url: `api/digitalAvatarPhoto/createPhoto`,
method: 'POST',
data
})
}

+ 9
- 0
src/api/createing.js View File

@@ -0,0 +1,9 @@
import request from "../utils/request"

// 获取风格列表
export function findWorkByIdApi(id) {
return request({
url: `api/digitalAvatarPhoto/findById?id=${id}`,
method: 'GET',
})
}

+ 30
- 0
src/api/uploadphoto.js View File

@@ -0,0 +1,30 @@
import request from "../utils/request"

// /api/baidu/checkPhoto
// /api/userDigital/checkPhoto
// /api/upload/awsImgUpload //上传,先上传后保存
// /api/userDigital/addImage //保存
// {
// "image":
// }
// 百度人脸识别
export function baiduPhotoApi(data) {
const formData = new FormData();
formData.append('file', data);
return request({
url: 'api/baidu/checkPhoto',
method: 'post',
data: formData,
headers: {
'Content-Type': 'application/form-data'
}
});
}

export function addImageApi(data) {
return request({
url: 'api/userDigital/addImage',
method: 'post',
data
});
}

+ 61
- 17
src/pages/closeStyle/closeStyle.vue View File

@@ -4,13 +4,13 @@
<u-list-item class="glodYBox">
<u-list-item
v-for="item in styleList"
:key="index"
:key="item.id"
class="styleListBoxItme"
>
<view class="styleInfo" @click="createPhoto">
<image src="../../assets/img/homeImg.png" mode="aspectFit" />
<text class="name">样式风格</text>
<text class="single">单人</text>
<view class="styleInfo" @click="createPhoto(item.id)">
<image :src="item.coverImg" mode="aspectFit" />
<text class="name">{{ item.title }}</text>
<text class="single">{{ peopleNum(item.mouldType) }}</text>
</view>
</u-list-item>
</u-list-item>
@@ -22,23 +22,63 @@
//#region 导入
import { ref, reactive } from "vue";
import { voiceTotalApi } from "../../api/login.js";
import { getListApi } from "../../api/closeStyle";
//#endregion

//#region 列表加载
const styleList = ref([0, 1, 2, 3, 4, 5, 6, 7]);
const scrolltolower = () => {
loadmore();
const pageNum = ref(1);
const pageSize = ref(6);
const styleList = ref([]);
// 得到列表
async function getList() {
try {
const res = await getListApi(pageNum.value, pageSize.value);
styleList.value = res.data.list;
} catch (error) {
uni.showToast({
title: "获取列表失败,请重试",
icon: "none",
});
}
}
getList();
// 触底加载更多
const scrolltolower = async () => {
try {
pageNum.value += 1;
const res = await getListApi(pageNum.value, pageSize.value);
if (res.data.list.length == 0) {
pageNum.value -= 1;
uni.showToast({
title: "已加载全部内容",
icon: "none",
});
}
styleList.value.push(...res.data.list);
} catch (error) {
uni.showToast({
title: "获取数据失败,请重试",
icon: "none",
});
}
};

const loadmore = () => {
styleList.value.push(...[8, 9, 10, 11]);
};
// 处理单人双人多人
function peopleNum(num) {
if (num == 1) {
return "单人";
} else if (num == 2) {
return "双人";
} else if (num == 3) {
return "三人";
}
}
//#endregion ---------------------

//#region 点击图片
function createPhoto() {
uni.redirectTo({
url: "/pages/closeStyle/goCreatePhoto",
function createPhoto(id) {
uni.navigateTo({
url: `/pages/closeStyle/goCreatePhoto?id=${id}`,
});
}
//#endregion ---------------------
@@ -70,6 +110,9 @@ function createPhoto() {
// }
// }
// }
.page {
background-color: #222527;
}
.u-list {
width: 650rpx;
.glodYBox {
@@ -98,7 +141,7 @@ function createPhoto() {
height: 400rpx;
}
.name {
background-color: red;
background-color: #393b3d;
width: 100%;
height: 80rpx;
text-align: center;
@@ -114,8 +157,9 @@ function createPhoto() {
height: 41rpx;
text-align: center;
line-height: 41rpx;
background: #000000;
opacity: 0.4;
background: rgba(0, 0, 0, 0.4);
font-size: 22rpx;
// opacity: 0.4;
border-radius: 12rpx;
}
}


+ 54
- 10
src/pages/closeStyle/goCreatePhoto.vue View File

@@ -1,10 +1,10 @@
<template>
<view class="page">
<view class="showImgBox imgContenBox"
><image src="../../assets/img/img1.png" mode="aspectFit"
><image :src="styleData.coverImg"
/></view>
<text class="name">风格名称</text>
<view class="orangeBtn" @click="createing"
<text class="name">{{ styleData.title }}</text>
<view class="orangeBtn" @click="createing(styleData.id)"
>开始制作写真
<view class="free">
<image src="../../assets/icon/blackBG.png" mode="aspectFit" />
@@ -21,14 +21,57 @@
<script setup>
//#region 导入
import { ref, reactive } from "vue";
import { voiceTotalApi } from "../../api/login.js";
import { onLoad } from "@dcloudio/uni-app";
import {
findByIdApi,
findImageApi,
createPhotoApi,
} from "../../api/closeStyle";
//#endregion
//#region 初始化
const styleId = ref(null);
const styleData = ref(null);
onLoad((options) => {
styleId.value = options.id;
getInfo();
});
async function getInfo() {
try {
const res = await findByIdApi(styleId.value);
console.log(res);
styleData.value = res.data;
} catch (error) {
uni.showToast({
title: "获取数据失败,请重试",
icon: "none",
});
}
}
//#endregion ---------------------
//#region 生成写真照片
function createing() {
uni.redirectTo({
url: "/pages/createing/index",
});
async function createing(id) {
try {
const res = await findImageApi();
console.log(res);
let myImg = res.data.image;
const data = {
digitalAvatarId: id,
userImages: JSON.stringify([myImg]),
};
const res2 = await createPhotoApi(data);
console.log(res2);
uni.navigateTo({
url: `/pages/createing/index?id=${res2.data.id}`,
});
} catch (error) {
console.log(error);
uni.showToast({
title: "生成失败,请重试",
icon: "none",
});
}
}
//#endregion ---------------------
@@ -45,8 +88,9 @@ function createing() {
// background-color: #ccc;
border-radius: 30rpx;
image {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
border-radius: 30rpx;
}
}
.name {


+ 40
- 7
src/pages/createing/index.vue View File

@@ -2,7 +2,7 @@
<view class="page">
<view class="topBox">
<view class="imgContenBox">
<image src="../../assets/img/img2.png" mode="aspectFit" />
<image :src="styleData.coverImg" mode="aspectFit" />
</view>
<view class="changeStyle" @click="changeStyle">更换风格</view>
</view>
@@ -16,17 +16,19 @@
indicatorMode="line"
:autoplay="false"
radius="5"
bgColor="#333"
bgColor="#1f2123"
@click="goLookPhoto"
></u-swiper>
<!-- 生成中的底部栏 -->
<view v-show="false" class="createIng">
<text class="time">写真生成中,预计用时X分X秒</text>
<text class="inform">做好后通知我</text>
<view v-show="createState == 1" class="createIng">
<text v-show="createState == 1" class="time"
>写真生成中,预计用时X分X秒</text
>
<text v-show="createState == 1" class="inform">做好后通知我</text>
<view class="orangeBtn" @click="changeStyle">继续制作写真</view>
</view>
<!-- 生成成功的底部栏 -->
<view class="createEd">
<view v-show="createState == 2" class="createEd">
<view class="orangeBtn anew" @click="changeStyle">重新生成</view>
</view>
</view>
@@ -35,7 +37,9 @@
<script setup>
//#region 导入
import { ref, reactive } from "vue";
import { voiceTotalApi } from "../../api/login.js";
import { onLoad } from "@dcloudio/uni-app";
import { findWorkByIdApi } from "../../api/createing.js";
import { findByIdApi } from "../../api/closeStyle.js";
//#endregion
//#region 生成写真照片
@@ -46,6 +50,31 @@ const swiperList = [
];
//#endregion ---------------------
//#region 查询页面状态
const workId = ref(null); //作品id
const createState = ref(null); //制作状态:1生成中,2完成,3失败
const styleId = ref(null); //风格id
const styleData = ref(null);
onLoad((options) => {
workId.value = options.id;
// getInfo();
getWorkInfo();
});
async function getWorkInfo() {
try {
// const res = await findWorkByIdApi("854592119583068160");
const res = await findWorkByIdApi(workId.value);
console.log(res);
createState.value = res.data.status;
styleId.value = res.data.digitalAvatarId;
const res2 = await findByIdApi(styleId.value);
styleData.value = res2.data;
} catch (error) {
console.log(error);
}
}
//#endregion ---------------------
//#region 页面跳转
function changeStyle() {
uni.redirectTo({
@@ -65,6 +94,9 @@ function goLookPhoto() {
</script>
<style lang="scss">
.page {
background-color: #1f2123;
}
.topBox {
margin-top: 20rpx;
display: flex;
@@ -79,6 +111,7 @@ function goLookPhoto() {
image {
width: 150rpx;
max-height: 200rpx;
border-radius: 30rpx;
}
}
.changeStyle {


+ 1
- 1
src/pages/login/index.vue View File

@@ -45,7 +45,7 @@

<script setup>
//#region 导入
import { ref, reactive } from "vue";
import { ref, reactive, computed } from "vue";
import { voiceTotalApi, loginPhoneApi } from "../../api/login.js";
import { userInfoModules } from "@/store/modules/userInfo";
//#endregion


+ 9
- 47
src/pages/uploadPhoto/success.vue View File

@@ -21,10 +21,13 @@
<text class="extol">您的颜值打败了全国99%的用户</text>
<!-- 底部盒子 -->
<view class="bottomBox">
<view class="uploadBtn grayBtn">
<view
@click="router('/pages/uploadPhoto/uploadPhoto')"
class="uploadBtn grayBtn"
>
<text>重新上传照片</text>
</view>
<view @click="downloadImg" class="uploadBtn">
<view @click="router('/pages/closeStyle/closeStyle')" class="uploadBtn">
<text>制作我的写真</text>
</view>
</view>
@@ -43,52 +46,11 @@ const userInfoModulesPinia = userInfoModules();
//#region 上传
const uploadState = ref(3); //上传状态
const showImgUrl = ref(null);
function chooseImage() {
// 调用uni.chooseImage方法选择图片
uni.chooseImage({
count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
success: async (res) => {
// 图片压缩
console.log(res.tempFiles[0].size);
if (userInfoModulesPinia.platForm != 1) {
uni.compressImage({
src: res.tempFilePaths[0],
quality: 20,
success: (res2) => {
showImgUrl.value = res2.tempFilePath;
console.log(res2.tempFilePath);
},
});
} else {
const options = {
maxSizeMB: 2, // 最大压缩大小为 4MB
useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
};
const compressedFile = await imageCompression(
res.tempFiles[0],
options
);
//compressedFile是一个blob对象
showImgUrl.value = URL.createObjectURL(compressedFile);
}
},
fail: (err) => {
console.error("选择图片失败", err);
},
});
}

function toCloseStyle() {
if (showImgUrl.value) {
uni.redirectTo({
url: "/pages/closeStyle/closeStyle",
});
} else {
uni.showToast({
title: "请先上传图片",
icon: "none",
});
}
function router(url) {
uni.redirectTo({
url: url,
});
}

//#endregion ---------------------


+ 93
- 17
src/pages/uploadPhoto/uploadPhoto.vue View File

@@ -2,14 +2,18 @@
<view class="page">
<view class="title">
<!-- 提示文字 -->
<text class="tips">照片不符合规范,请重新上传</text>
<text v-show="false" class="tips">添加一张正面照片</text>
<text v-show="false" class="tips">数字形象生成中</text>
<text v-show="uploadState == 1" class="tips">请添加一张正面照片</text>
<text v-show="uploadState == 2" class="tips">请点击上传</text>
<text v-show="uploadState == 3" class="tips">数字形象生成中</text>
<text v-show="uploadState == 4" class="tips"
>照片不符合规范,请重新上传</text
>
<text v-show="uploadState == 5" class="tips">上传失败,请重新上传</text>
</view>
<!-- 上传图片和展示 -->
<view class="uploadBox imgContenBox scan">
<!-- 扫描线 -->
<view class="scan-line"></view>
<view v-show="uploadState == 3" class="scan-line"></view>
<image
class="scan-border"
src="../../assets/img/scanBorder.png"
@@ -73,29 +77,32 @@
<script setup>
//#region 导入
import { ref, reactive } from "vue";
import { voiceTotalApi } from "../../api/login.js";
import { addImageApi } from "../../api/uploadphoto.js";
import { userInfoModules } from "@/store/modules/userInfo";
import imageCompression from "browser-image-compression"; //压缩图片插件
//#endregion
const userInfoModulesPinia = userInfoModules();
//#region 上传
const uploadState = ref(3); //上传状态
const showImgUrl = ref(null);
//#region 选择图片
const uploadState = ref(1); //上传状态
const showImgUrl = ref(null); //回显路径
const showImgUrl2 = ref(null); //回显路径
const showImgData = ref(null); //上传数据
function chooseImage() {
// 调用uni.chooseImage方法选择图片
uni.chooseImage({
count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
success: async (res) => {
uploadState.value = 2;
// 图片压缩
console.log(res.tempFiles[0].size);
showImgUrl2.value = res.tempFiles[0];
if (userInfoModulesPinia.platForm != 1) {
uni.compressImage({
src: res.tempFilePaths[0],
quality: 20,
quality: 80,
success: (res2) => {
showImgUrl.value = res2.tempFilePath;
console.log(res2.tempFilePath);
},
});
} else {
@@ -109,6 +116,7 @@ function chooseImage() {
);
//compressedFile是一个blob对象
showImgUrl.value = URL.createObjectURL(compressedFile);
showImgData.value = compressedFile;
}
},
fail: (err) => {
@@ -117,19 +125,87 @@ function chooseImage() {
});
}
function toCloseStyle() {
if (showImgUrl.value) {
uni.redirectTo({
url: "/pages/closeStyle/closeStyle",
});
} else {
//#endregion ---------------------
//#region 上传图片
// console.log(userInfoModulesPinia.token, "token");
async function toCloseStyle() {
if (!showImgUrl.value) {
uni.showToast({
title: "请先上传图片",
icon: "none",
});
return;
}
}
uploadState.value = 3;
// 人脸识别接口
uni.uploadFile({
url: "https://test.metavatar.cc/C/api/userDigital/checkPhoto", //上传图片api
filePath: showImgUrl.value,
name: "file",
formData: {
user: "test",
},
header: {
// Authorization: userInfoModulesPinia.token,
token: userInfoModulesPinia.token,
},
success: (res) => {
if (JSON.parse(res.data).code != 200) {
uploadState.value = 4;
return;
}
// 上传接口
uni.uploadFile({
url: "https://test.metavatar.cc/C/api/upload/awsImgUpload", //上传图片api
filePath: showImgUrl.value,
name: "file",
formData: {
user: "test",
},
header: {
"Content-Type": "multipart/form-data",
token: userInfoModulesPinia.token,
},
success: async (res2) => {
if (JSON.parse(res2.data).code != 200) {
uploadState.value = 5;
uni.showToast({
title: "网络被数字人偷走了, 请稍后重试",
icon: "none",
});
return;
}
// 保存接口
const res3 = await addImageApi({
image: JSON.parse(res2.data).data.url,
});
if (res3.code == 200) {
uni.redirectTo({
url: "/pages/uploadPhoto/success",
});
} else {
uni.showToast({
title: "网络被数字人偷走了, 请稍后重试",
icon: "none",
});
}
},
fail: () => {
uploadState.value = 5;
},
});
},
fail: () => {
uploadState.value = 4;
},
});
}
//#endregion ---------------------
//#region


+ 10
- 1
src/utils/request.js View File

@@ -1,4 +1,9 @@
import { userInfoModules } from "@/store/modules/userInfo";
import { store } from '@/store/index';
const BASE_URL = 'https://test.metavatar.cc/C/';
const userInfoModulesPinia = userInfoModules(store);
// const BASE_URL = 'https://test.metavatar.cc/';
// 通用的网络请求函数,接收请求的URL和请求参数,返回一个Promise
@@ -8,6 +13,10 @@ const request = (requestObj) => {
url: BASE_URL + requestObj.url,
method: requestObj.method, // 这里可以根据需要更改请求方法
data: requestObj.data,
header: {
// Authorization: userInfoModulesPinia.token,
token: userInfoModulesPinia.token,
},
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data)
@@ -29,4 +38,4 @@ const request = (requestObj) => {
})
})
};
export default request
export default request

Loading…
Cancel
Save