Browse Source

上传图片逻辑处理

dev
congzc 2 years ago
parent
commit
0fdeab176a
4 changed files with 155 additions and 52 deletions
  1. +5
    -0
      src/lang/package/en.ts
  2. +5
    -0
      src/lang/package/zh-cn.ts
  3. +125
    -51
      src/views/createVideo/index.vue
  4. +20
    -1
      src/views/myCreating/index.vue

+ 5
- 0
src/lang/package/en.ts View File

@@ -44,6 +44,9 @@ export default {
personalWarehouse:'Personal warehouse',
typeScript: "Type your Script",
uploadAudio: "Upload Audio",
recordedAudio:'Recorded audio',
startRecorded:'Start recording',
stopRecorded:'Stop recording',
aiScript: "Ai Script",
typeTitle: "Type a title",
confirm: "Confirm",
@@ -54,6 +57,8 @@ export default {
reselect: "reselect",
sureUpload: "Confirm upload",
generateVideo: "Generate Video",
saveVideo:'save video',
select:'Please select',
},

// 我的视频


+ 5
- 0
src/lang/package/zh-cn.ts View File

@@ -44,6 +44,9 @@ export default {
personalWarehouse:'个人仓库',
typeScript: "输入文案",
uploadAudio: "上传音频",
recordedAudio:'录制音频',
startRecorded:'开始录制',
stopRecorded:'停止录制',
aiScript: "AI生成文本",
typeTitle: "输入标题",
confirm: "确定",
@@ -54,6 +57,8 @@ export default {
reselect: "重新选择",
sureUpload: "确认上传",
generateVideo: "生成视频",
saveVideo:'保存视频',
select:'请选择',
},

// 我的视频


+ 125
- 51
src/views/createVideo/index.vue View File

@@ -7,7 +7,11 @@
<div class="left-top" v-show="!showUploadBtn">
<el-row class="justify-between">
<!-- title框 -->
<div class="flex justify-between" style="width: 300px">
<div
v-show="!submitImgBtn"
class="flex justify-between"
style="width: 300px"
>
<el-input
v-model="title"
:placeholder="$t('createVideo.typeTitle')"
@@ -18,12 +22,7 @@
<div class="btnBox" v-show="submitImgBtn">
<button class="uploadBtn">
{{ $t("createVideo.reselect") }}
<input
accept="image/*"
type="file"
@click="e.target.value = null"
@change="lookImg"
/>
<input accept="image/*" type="file" @change="lookImg" />
</button>
<button class="uploadBtn" @click="changeFile">
{{ $t("createVideo.sureUpload") }}
@@ -48,12 +47,7 @@
</div>
<div v-if="!compressionImgLoad" class="upload inmiddle">
+
<input
accept="image/*"
type="file"
@click="e.target.value = null"
@change="lookImg"
/>
<input accept="image/*" type="file" @change="lookImg" />
</div>
<div v-if="!compressionImgLoad" class="falseImg inmiddle">
<div><div class="icon">×</div></div>
@@ -83,11 +77,7 @@
</div>
<div class="faceList">
<!-- 上传图片组件 -->
<div
v-if="showFace == 1"
class="faceItem"
@click="showUploadBtn = true"
>
<div v-if="showFace == 1" class="faceItem" @click="clickAddBtn">
<span class="uploadImg">+ </span>
</div>
<my-loading :isLoading="feceItemLoading"></my-loading>
@@ -135,7 +125,7 @@
<el-select
@change="chooseType"
v-model="language"
placeholder="Select"
:placeholder="$t('createVideo.select')"
style="width: 100%"
>
<el-option
@@ -162,7 +152,7 @@
@change="chooseStyle"
:disabled="language ? false : true"
v-model="sound"
:placeholder="language ? 'Select' : 'Please select language'"
:placeholder="$t('createVideo.select')"
style="width: 100%"
>
<el-option
@@ -177,7 +167,7 @@
<el-select
:disabled="soundStyleOptions ? false : true"
v-model="soundStyle"
:placeholder="soundStyleOptions ? 'Select' : '暂无数据'"
:placeholder="$t('createVideo.select')"
style="width: 100%"
>
<el-option
@@ -187,12 +177,25 @@
:value="item"
/>
</el-select>
<!-- 生成视频 -->
<el-button @click="saveOrUpdate(1)" color="#000" type="primary">
<my-loading :isLoading="createLoading"></my-loading>
<span v-if="!createLoading">{{
$t("createVideo.generateVideo")
}}</span></el-button
>
<!-- 保存视频 -->
<el-button
@click="saveOrUpdate(1, 'saveVideo')"
color="#000"
type="primary"
style="margin-left: 0"
>
<my-loading :isLoading="createLoading"></my-loading>
<span v-if="!createLoading">{{
$t("createVideo.saveVideo")
}}</span></el-button
>
</div>
</el-tab-pane>
<!-- ------------------------ 2 -->
@@ -201,7 +204,7 @@
<!-- 上传视频 -->
<p>
<el-icon class="icon-VideoCamera"><i-ep-VideoCamera /></el-icon>
上传音频
{{ $t("createVideo.uploadAudio") }}
</p>
<div class="uploadVideo">
+
@@ -223,7 +226,7 @@
<!-- 录制MP3上传语音 -->
<p>
<el-icon class="icon-Mic"><i-ep-Mic /></el-icon>
录制音频
{{ $t("createVideo.recordedAudio") }}
</p>
<div
class="uploadAudio"
@@ -235,14 +238,14 @@
:disabled="!isRecording"
@click="startRecording"
>
开始录音
{{ $t("createVideo.startRecorded") }}
</button>
<button
class="pointer"
@click="stopRecording"
:disabled="isRecording"
>
停止录音
{{ $t("createVideo.stopRecorded") }}
</button>
</div>
<!-- <button @click="playRecording">播放录音</button> -->
@@ -251,12 +254,25 @@
上传音频
</button> -->
</div>
<!-- 生成视频 -->
<el-button @click="saveOrUpdate(2)" color="#000" type="primary">
<my-loading :isLoading="createLoading"></my-loading>
<span v-if="!createLoading">{{
$t("createVideo.generateVideo")
}}</span>
</el-button>
<!-- 保存视频 -->
<el-button
@click="saveOrUpdate(2, 'saveVideo')"
color="#000"
type="primary"
style="margin-left: 0"
>
<my-loading :isLoading="createLoading"></my-loading>
<span v-if="!createLoading">{{
$t("createVideo.saveVideo")
}}</span></el-button
>
</div>
</el-tab-pane>
<!-- ----------------------- 3 -->
@@ -348,9 +364,13 @@ import {
createVideoApi,
previewAudioApi,
} from "@/apis/createVideo";
import { useI18n } from "vue-i18n";
import Recorder from "js-audio-recorder"; //mp3插件
import imageCompression from "browser-image-compression"; //压缩图片插件

const { locale } = useI18n();
const lanChange = ref(locale);

//#region 头像区的逻辑
// 获取AI头像
const AiFaceList = ref([]);
@@ -392,18 +412,27 @@ function setImgUrl(url, id) {
//#region 预览图片
const compressionImgLoad = ref(false);
async function lookImg(e) {
// 压缩配置
compressionImgLoad.value = true;
const options = {
maxSizeMB: 2, // 最大压缩大小为 1MB
useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
};
const compressedFile = await imageCompression(e.target.files[0], options);
imgUrl.value = URL.createObjectURL(compressedFile);
imgData.value = compressedFile;
showUploadBtn.value = false;
submitImgBtn.value = true;
compressionImgLoad.value = false;
if (e.target.files[0]) {
faceItemActive.value = null;
imgUrl.value = null;
imgData.value = null;
showUploadBtn.value = true;
submitImgBtn.value = false;
compressionImgLoad.value = true;
// 压缩配置
const options = {
maxSizeMB: 2, // 最大压缩大小为 1MB
useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
};
const compressedFile = await imageCompression(e.target.files[0], options);
imgUrl.value = URL.createObjectURL(compressedFile);
imgData.value = compressedFile;
showUploadBtn.value = false;
submitImgBtn.value = true;
compressionImgLoad.value = false;
} else {
return;
}
}
//#endregion ------------------

@@ -415,6 +444,11 @@ const imgUrl = ref(""); //图片回显路径
const imgData = ref(""); // 上传图片文件
const showUploadBtn = ref(false); //上传图片+号的显示隐藏
const submitImgBtn = ref(false); //右上角俩按钮显示与隐藏
// 点击AI头像区的+号
function clickAddBtn() {
faceItemActive.value = null;
showUploadBtn.value = true;
}
// 上传图片
async function changeFile() {
imgUrl.value = URL.createObjectURL(imgData.value);
@@ -422,13 +456,21 @@ async function changeFile() {
const timestamp = Date.now();
formData.append("file", imgData.value, timestamp + ".png");
try {
// 上传图片
const res = await awsImgUpload(formData);
if (res.code == 200) {
ElMessage.success("上传成功!");
// 保存图片
const res2 = await saveImgApi({ material: res.data.url });
// 重新获取列表
getAiFaceList(1, 100, 1);
if (res2.code == 200) {
ElMessage.success(
lanChange.value == "zh-cn" ? `上传成功` : `Upload successfully`
);
} else {
ElMessage.error("上传失败!");
ElMessage.error(
lanChange.value == "zh-cn" ? `上传失败` : `Upload failure`
);
}
const res2 = await saveImgApi({ material: res.data.url });
} catch (error) {
ElMessage.error(error);
}
@@ -496,11 +538,19 @@ async function chooseStyle() {
const previewAudioUrl = ref(null);
async function getPreviewAudio() {
if (!textareaContent.value) {
ElMessage.error("您还没有输入文案");
ElMessage.error(
lanChange.value == "zh-cn"
? `您还没有输入文案`
: `You have not entered the copy yet`
);
return;
}
if (!sound.value) {
ElMessage.error("您还没有选择声音");
ElMessage.error(
lanChange.value == "zh-cn"
? `您还没有选择声音`
: `You have not selected the sound`
);
return;
}

@@ -558,7 +608,7 @@ const playRecording = () => {
}
};
// 上传音频
async function uploadAudio() {
async function uploadAudio(isSaveVideo) {
createLoading.value = true;
let formData = new FormData();
const timestamp = Date.now();
@@ -569,12 +619,14 @@ async function uploadAudio() {
if (res) {
// ElMessage.success("上传成功!");
} else {
ElMessage.error("音频上传失败!");
ElMessage.error(
lanChange.value == "zh-cn" ? `上传音频失败!` : `Failed to upload audio!`
);
return;
}
// 查询进度
intervalId = setInterval(() => {
uploadProgress(res.data.videoId);
uploadProgress(res.data.videoId, isSaveVideo);
}, 1000);
// ElMessage.success("上传成功!");
} catch (error) {
@@ -597,7 +649,7 @@ const handleFileChange = async () => {
};
// 获取视频上传进度
const afterSaveAudioId = ref(null);
async function uploadProgress(videoId) {
async function uploadProgress(videoId, isSaveVideo) {
const res = await uploadProgressApi(videoId);
if (res.data == "complete") {
clearInterval(intervalId);
@@ -618,9 +670,20 @@ async function uploadProgress(videoId) {
};
try {
const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
if (isSaveVideo == "saveVideo") {
ElMessage.success(
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft`
);
createLoading.value = false;
return;
}
const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频
if (res4.message == "success") {
ElMessage.success("视频正在生成,请耐心等待");
ElMessage.success(
lanChange.value == "zh-cn"
? `视频正在生成中,请耐心等待`
: `The video is being generated, please wait patiently`
);
}
createLoading.value = false;
} catch (error) {
@@ -637,7 +700,7 @@ const tabFrom = ref(1);
const createLoading = ref(false);
// 上传音频后,得到videoId
// 保存数据
async function saveOrUpdate(index) {
async function saveOrUpdate(index, isSaveVideo) {
if (createLoading.value == true) {
return;
}
@@ -654,9 +717,20 @@ async function saveOrUpdate(index) {
createLoading.value = true;
try {
const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
if (isSaveVideo == "saveVideo") {
ElMessage.success(
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft`
);
createLoading.value = false;
return;
}
const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频
if (res3.message == "success") {
ElMessage.success("视频正在生成,请耐心等待");
ElMessage.success(
lanChange.value == "zh-cn"
? `视频正在生成中,请耐心等待`
: `The video is being generated, please wait patiently`
);
}
createLoading.value = false;
} catch (error) {
@@ -666,7 +740,7 @@ async function saveOrUpdate(index) {
}
if (index == 2) {
try {
const res1 = await uploadAudio(); // 上传音频
const res1 = await uploadAudio(isSaveVideo); // 上传音频
} catch (error) {
ElMessage.error(error);
createLoading.value = false;


+ 20
- 1
src/views/myCreating/index.vue View File

@@ -46,7 +46,26 @@
@mouseleave="mouseleave"
@click="clickVideoItem(item)"
>
<el-icon class="icon-videoPlay"><i-ep-videoPlay /></el-icon>
<el-icon
v-if="[0].includes(item.videoStatus)"
class="icon-videoPlay"
><i-ep-edit
/></el-icon>
<el-icon
v-if="[1, 2, 4, 6].includes(item.videoStatus)"
class="icon-videoPlay"
><i-ep-loading
/></el-icon>
<el-icon
v-if="[3].includes(item.videoStatus)"
class="icon-videoPlay"
><i-ep-closeBold
/></el-icon>
<el-icon
v-if="[5].includes(item.videoStatus)"
class="icon-videoPlay"
><i-ep-videoPlay
/></el-icon>
<div class="showBtn" @click.stop="mouseenter(item)">...</div>
<div class="btns" v-show="showPopup">
<div class="btns-item" @click.stop="handleDownload(item.id)">


Loading…
Cancel
Save