+
+
-
+
-
+
+
@@ -135,7 +125,7 @@
+
{{
$t("createVideo.generateVideo")
}}
+
+
+
+ {{
+ $t("createVideo.saveVideo")
+ }}
@@ -201,7 +204,7 @@
- 上传音频
+ {{ $t("createVideo.uploadAudio") }}
+
@@ -223,7 +226,7 @@
- 录制音频
+ {{ $t("createVideo.recordedAudio") }}
- 开始录音
+ {{ $t("createVideo.startRecorded") }}
@@ -251,12 +254,25 @@
上传音频
-->
+
{{
$t("createVideo.generateVideo")
}}
+
+
+
+ {{
+ $t("createVideo.saveVideo")
+ }}
@@ -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;
diff --git a/src/views/myCreating/index.vue b/src/views/myCreating/index.vue
index 52a41d7..34a865f 100644
--- a/src/views/myCreating/index.vue
+++ b/src/views/myCreating/index.vue
@@ -46,7 +46,26 @@
@mouseleave="mouseleave"
@click="clickVideoItem(item)"
>
-
+
+
+
+
...