congzc 1 년 전
부모
커밋
d99667882c
4개의 변경된 파일107개의 추가작업 그리고 19개의 파일을 삭제
  1. BIN
      src/assets/img/uploadImg.png
  2. +19
    -0
      src/styles/my.scss
  3. +2
    -0
      src/types/components.d.ts
  4. +86
    -19
      src/views/createVideo/index.vue

BIN
src/assets/img/uploadImg.png 파일 보기

Before After
Width: 200  |  Height: 200  |  Size: 5.9 KiB

+ 19
- 0
src/styles/my.scss 파일 보기

@@ -72,6 +72,25 @@ p {
border-radius: 30px !important; border-radius: 30px !important;
} }


.imgInCenter {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
// z-index: -1;

img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80%;
max-height: 80%;
}
}

// :deep(.el-input__wrapper.is-focus) { // :deep(.el-input__wrapper.is-focus) {
// box-shadow: 0 0 0 1px #000 !important; // box-shadow: 0 0 0 1px #000 !important;
// } // }

+ 2
- 0
src/types/components.d.ts 파일 보기

@@ -49,6 +49,8 @@ declare module '@vue/runtime-core' {
IEpMic: typeof import('~icons/ep/mic')['default'] IEpMic: typeof import('~icons/ep/mic')['default']
IEpSearch: typeof import('~icons/ep/search')['default'] IEpSearch: typeof import('~icons/ep/search')['default']
IEpSetting: typeof import('~icons/ep/setting')['default'] IEpSetting: typeof import('~icons/ep/setting')['default']
IEpSwitchButton: typeof import('~icons/ep/switch-button')['default']
IEpVideoPause: typeof import('~icons/ep/video-pause')['default']
IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] IEpVideoPlay: typeof import('~icons/ep/video-play')['default']
LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']


+ 86
- 19
src/views/createVideo/index.vue 파일 보기

@@ -41,7 +41,8 @@
</div> </div>
<div v-if="!compressionImgLoad" class="upload inmiddle"> <div v-if="!compressionImgLoad" class="upload inmiddle">
<p> <p>
<el-icon><i-ep-FolderAdd /></el-icon>
<!-- <el-icon><i-ep-FolderAdd /></el-icon> -->
<img src="../../assets/img/uploadImg.png" alt="" />
</p> </p>
<span>{{ $t("createVideo.uploadImgTip1") }}</span> <span>{{ $t("createVideo.uploadImgTip1") }}</span>
<span>{{ $t("createVideo.uploadImgTip2") }}</span> <span>{{ $t("createVideo.uploadImgTip2") }}</span>
@@ -334,7 +335,7 @@
v-for="item in soundOptions" v-for="item in soundOptions"
:key="item.value" :key="item.value"
:label=" :label="
item.displayName + `&nbsp; (${item.sex == 1 ? '男' : '女'})`
item.displayName + `&nbsp; (${item.sex == 1 ? '♂' : '♀'})`
" "
:value="item.id" :value="item.id"
/> />
@@ -393,7 +394,10 @@
audioUrl && showAudioWhich == 1 ? 'uploadAudioAvtion2' : '' audioUrl && showAudioWhich == 1 ? 'uploadAudioAvtion2' : ''
" "
> >
<el-icon><i-ep-FolderAdd /></el-icon>
<!-- <el-icon><i-ep-FolderAdd /></el-icon> -->
<!-- <div>
</div> -->
<img src="../../assets/img/uploadImg.png" alt="" />
<!-- fileInput.value.files[0] e.target.value = null --> <!-- fileInput.value.files[0] e.target.value = null -->
<input <input
accept="audio/*" accept="audio/*"
@@ -424,6 +428,12 @@
@click="startRecording" @click="startRecording"
> >
{{ $t("createVideo.startRecorded") }} {{ $t("createVideo.startRecorded") }}
<div v-if="isRecording" class="pointer">
<el-icon><i-ep-VideoPlay /></el-icon>
</div>
<div v-if="!isRecording" class="pointer">
<el-icon><i-ep-VideoPause /></el-icon>
</div>
</button> </button>
<button <button
class="pointer" class="pointer"
@@ -431,6 +441,9 @@
:disabled="isRecording" :disabled="isRecording"
> >
{{ $t("createVideo.stopRecorded") }} {{ $t("createVideo.stopRecorded") }}
<div class="pointer">
<el-icon><i-ep-SwitchButton /></el-icon>
</div>
</button> </button>
</div> </div>
<div class="AudioBox" v-if="audioUrl && showAudioWhich == 2"> <div class="AudioBox" v-if="audioUrl && showAudioWhich == 2">
@@ -492,12 +505,15 @@
</div> </div>
<!-- 上传音乐 --> <!-- 上传音乐 -->
<div v-if="musicTabActive == 2" class="uploadVideo"> <div v-if="musicTabActive == 2" class="uploadVideo">
<el-icon><i-ep-FolderAdd /></el-icon>
<!-- <el-icon><i-ep-FolderAdd /></el-icon> -->
<div class="imgInCenter">
<img src="../../assets/img/uploadImg.png" alt="" />
</div>
<input <input
accept="audio/*" accept="audio/*"
type="file" type="file"
ref="fileMusicInput" ref="fileMusicInput"
@click="e.target.value = null"
@click="handleFileMusicClick"
@change="uploadMusic" @change="uploadMusic"
/> />
</div> </div>
@@ -644,8 +660,9 @@
</el-tabs> </el-tabs>
</div> </div>
<!-- 试听的mp3 --> <!-- 试听的mp3 -->
<div style="opacity: 0; width: 0">
<audio autoplay :src="previewAudioUrl" id="audio"></audio>
<!-- style="opacity: 0; width: 0" -->
<div>
<audio muted autoplay :src="previewAudioUrl" id="audio"></audio>
</div> </div>
</div> </div>
</template> </template>
@@ -999,6 +1016,7 @@ async function getPreviewAudio() {
} }
previewAudioUrl.value = res.data.data; previewAudioUrl.value = res.data.data;
let audioA = document.getElementById("audio"); let audioA = document.getElementById("audio");
audioA.muted = false; // 将 muted 属性设置为 false
audioA.addEventListener("loadedmetadata", function () { audioA.addEventListener("loadedmetadata", function () {
audioA.play(); audioA.play();
}); });
@@ -1118,22 +1136,22 @@ const handleFileChange = async () => {
// 进行大小时长限制 // 进行大小时长限制
await countAudioTime(audio2); await countAudioTime(audio2);
// 限制60秒 // 限制60秒
if (uploadAudioTime.value > 960) {
if (uploadAudioTime.value > 60) {
ElMessage.error( ElMessage.error(
lanChange.value == "zh-cn" lanChange.value == "zh-cn"
? `上传失败,您上传的文件时长与您的权益不匹配`
: `The upload failed because the duration of the file you uploaded did not match your entitlements`
? `上传失败,上传音频时长最多为60秒`
: `Description Failed to upload audio files. The maximum duration of uploading audio files is 60 seconds`
); );
audioUrl.value = null; audioUrl.value = null;
audioData.value = null; audioData.value = null;
return; return;
} }
// 限制3mb // 限制3mb
if (file.size / 1048576 > 93) {
if (file.size / 1048576 > 3) {
ElMessage.error( ElMessage.error(
lanChange.value == "zh-cn" lanChange.value == "zh-cn"
? `上传失败,您上传的文件大小与您的权益不匹配`
: `Upload failed, the file size you uploaded does not match your entitlements`
? `上传失败,上传音频大小最大为3MB`
: `Description Upload failed. The maximum size of uploaded audio is 3MB`
); );
audioUrl.value = null; audioUrl.value = null;
audioData.value = null; audioData.value = null;
@@ -1163,7 +1181,10 @@ async function uploadProgress(videoId, isSaveVideo) {
if (res.data == "complete") { if (res.data == "complete") {
clearInterval(intervalId); clearInterval(intervalId);
try { try {
const res2 = await saveAudioApi({ videoId: videoId });
const res2 = await saveAudioApi({
videoId: videoId,
sendType: showAudioWhich.value,
});
afterSaveAudioId.value = res2.data.id; // 得到id afterSaveAudioId.value = res2.data.id; // 得到id
} catch (error) { } catch (error) {
ElMessage.error(error); ElMessage.error(error);
@@ -1360,6 +1381,9 @@ async function findById(findId) {
const res = await findByIdApi(findId); const res = await findByIdApi(findId);
id.value = res.data.id; id.value = res.data.id;
title.value = res.data.title; //标题回显 title.value = res.data.title; //标题回显
showAudioWhich.value = res.data.voiceMaterial
? res.data.voiceMaterial.sendType
: null;
faceItemActive.value = res.data.personPhotoId; //aiface高亮和图片id faceItemActive.value = res.data.personPhotoId; //aiface高亮和图片id
tabFrom.value = res.data.voiceFrom; //输入文案还是上传mp3模式 tabFrom.value = res.data.voiceFrom; //输入文案还是上传mp3模式
textareaContent.value = res.data.paperwork; //文案内容 textareaContent.value = res.data.paperwork; //文案内容
@@ -1368,6 +1392,7 @@ async function findById(findId) {
audioUrl.value = res.data.voiceMaterialUrl; // mp3回显 audioUrl.value = res.data.voiceMaterialUrl; // mp3回显
musicItemAction.value = res.data.musicId; //音乐id回显 musicItemAction.value = res.data.musicId; //音乐id回显
language.value = res.data.voiceInfo ? res.data.voiceInfo.languageId : null; language.value = res.data.voiceInfo ? res.data.voiceInfo.languageId : null;

if (language.value) { if (language.value) {
await chooseType(language.value); await chooseType(language.value);
} }
@@ -1444,6 +1469,12 @@ function handleTime(time) {
} }
return m + ":" + s; return m + ":" + s;
} }
// 点击上传音乐
// 点击上传input
function handleFileMusicClick(e) {
musicData.value = null;
e.target.value = null;
}
// 选择文件上传音乐 // 选择文件上传音乐
async function uploadMusic() { async function uploadMusic() {
const file = fileMusicInput.value.files[0]; const file = fileMusicInput.value.files[0];
@@ -1451,6 +1482,29 @@ async function uploadMusic() {
musicData.value = file; musicData.value = file;
let formData = new FormData(); let formData = new FormData();
formData.append("file", musicData.value, file.name + ".mp3"); formData.append("file", musicData.value, file.name + ".mp3");
const videoUrl = URL.createObjectURL(file);
const audio2 = new Audio();
audio2.src = videoUrl;
// 进行大小时长限制
await countAudioTime(audio2);
// 限制60秒
if (uploadAudioTime.value > 60) {
ElMessage.error(
lanChange.value == "zh-cn"
? `上传失败,上传音频时长最多为60秒`
: `Description Failed to upload audio files. The maximum duration of uploading audio files is 60 seconds`
);
return;
}
// 限制3mb
if (file.size / 1048576 > 3) {
ElMessage.error(
lanChange.value == "zh-cn"
? `上传失败,上传音频大小最大为3MB`
: `Description Upload failed. The maximum size of uploaded audio is 3MB`
);
return;
}
try { try {
const res = await videoUpload(formData); const res = await videoUpload(formData);
if (res) { if (res) {
@@ -1777,21 +1831,25 @@ onUnmounted(() => {
font-size: 50px; font-size: 50px;
line-height: 100px; line-height: 100px;
text-align: center; text-align: center;
background-color: #ccc;
background-color: rgba(204, 204, 204, 0.1);
border-radius: 30px; border-radius: 30px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px;
box-shadow: rgba(108, 120, 238, 0.3) 0px 0px 5px 5px;
p { p {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: -1; z-index: -1;
opacity: 0.1;
opacity: 0.5;
.el-icon { .el-icon {
width: 200px; width: 200px;
height: 200px; height: 200px;
font-size: 150px; font-size: 150px;
} }
img {
max-width: 60%;
max-height: 60%;
}
} }
span { span {
display: block; display: block;
@@ -2232,7 +2290,7 @@ onUnmounted(() => {
padding: 20px; padding: 20px;
// margin-top: 30px; // margin-top: 30px;
margin-bottom: 20px; margin-bottom: 20px;
height: 70px;
// height: 70px;
.btnBox { .btnBox {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -2245,16 +2303,20 @@ onUnmounted(() => {
} }
button { button {
border-radius: 10px; border-radius: 10px;
height: 30px;
// height: 30px;
line-height: 22px; line-height: 22px;
padding: 5px 10px; padding: 5px 10px;
background-color: #fff; background-color: #fff;
transition: all 0.3s; transition: all 0.3s;
cursor: pointer;
&:hover { &:hover {
background-color: #000; background-color: #000;


color: #fff; color: #fff;
} }
.el-icon {
font-size: 20px;
}
} }
} }
.uploadAudioAvtion { .uploadAudioAvtion {
@@ -2275,6 +2337,11 @@ onUnmounted(() => {
font-weight: 700; font-weight: 700;
line-height: 100px; line-height: 100px;
transition: all 0.3s; transition: all 0.3s;
img {
margin: auto;
max-width: 80%;
max-height: 80%;
}
input { input {
position: absolute; position: absolute;
top: 0; top: 0;


불러오는 중...
취소
저장