congzc 1年前
父节点
当前提交
d99667882c
共有 4 个文件被更改,包括 107 次插入19 次删除
  1. 二进制
      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

二进制
src/assets/img/uploadImg.png 查看文件

之前 之后
宽度: 200  |  高度: 200  |  大小: 5.9 KiB

+ 19
- 0
src/styles/my.scss 查看文件

@@ -72,6 +72,25 @@ p {
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) {
// 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']
IEpSearch: typeof import('~icons/ep/search')['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']
LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']


+ 86
- 19
src/views/createVideo/index.vue 查看文件

@@ -41,7 +41,8 @@
</div>
<div v-if="!compressionImgLoad" class="upload inmiddle">
<p>
<el-icon><i-ep-FolderAdd /></el-icon>
<!-- <el-icon><i-ep-FolderAdd /></el-icon> -->
<img src="../../assets/img/uploadImg.png" alt="" />
</p>
<span>{{ $t("createVideo.uploadImgTip1") }}</span>
<span>{{ $t("createVideo.uploadImgTip2") }}</span>
@@ -334,7 +335,7 @@
v-for="item in soundOptions"
:key="item.value"
:label="
item.displayName + `&nbsp; (${item.sex == 1 ? '男' : '女'})`
item.displayName + `&nbsp; (${item.sex == 1 ? '♂' : '♀'})`
"
:value="item.id"
/>
@@ -393,7 +394,10 @@
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 -->
<input
accept="audio/*"
@@ -424,6 +428,12 @@
@click="startRecording"
>
{{ $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
class="pointer"
@@ -431,6 +441,9 @@
:disabled="isRecording"
>
{{ $t("createVideo.stopRecorded") }}
<div class="pointer">
<el-icon><i-ep-SwitchButton /></el-icon>
</div>
</button>
</div>
<div class="AudioBox" v-if="audioUrl && showAudioWhich == 2">
@@ -492,12 +505,15 @@
</div>
<!-- 上传音乐 -->
<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
accept="audio/*"
type="file"
ref="fileMusicInput"
@click="e.target.value = null"
@click="handleFileMusicClick"
@change="uploadMusic"
/>
</div>
@@ -644,8 +660,9 @@
</el-tabs>
</div>
<!-- 试听的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>
</template>
@@ -999,6 +1016,7 @@ async function getPreviewAudio() {
}
previewAudioUrl.value = res.data.data;
let audioA = document.getElementById("audio");
audioA.muted = false; // 将 muted 属性设置为 false
audioA.addEventListener("loadedmetadata", function () {
audioA.play();
});
@@ -1118,22 +1136,22 @@ const handleFileChange = async () => {
// 进行大小时长限制
await countAudioTime(audio2);
// 限制60秒
if (uploadAudioTime.value > 960) {
if (uploadAudioTime.value > 60) {
ElMessage.error(
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;
audioData.value = null;
return;
}
// 限制3mb
if (file.size / 1048576 > 93) {
if (file.size / 1048576 > 3) {
ElMessage.error(
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;
audioData.value = null;
@@ -1163,7 +1181,10 @@ async function uploadProgress(videoId, isSaveVideo) {
if (res.data == "complete") {
clearInterval(intervalId);
try {
const res2 = await saveAudioApi({ videoId: videoId });
const res2 = await saveAudioApi({
videoId: videoId,
sendType: showAudioWhich.value,
});
afterSaveAudioId.value = res2.data.id; // 得到id
} catch (error) {
ElMessage.error(error);
@@ -1360,6 +1381,9 @@ async function findById(findId) {
const res = await findByIdApi(findId);
id.value = res.data.id;
title.value = res.data.title; //标题回显
showAudioWhich.value = res.data.voiceMaterial
? res.data.voiceMaterial.sendType
: null;
faceItemActive.value = res.data.personPhotoId; //aiface高亮和图片id
tabFrom.value = res.data.voiceFrom; //输入文案还是上传mp3模式
textareaContent.value = res.data.paperwork; //文案内容
@@ -1368,6 +1392,7 @@ async function findById(findId) {
audioUrl.value = res.data.voiceMaterialUrl; // mp3回显
musicItemAction.value = res.data.musicId; //音乐id回显
language.value = res.data.voiceInfo ? res.data.voiceInfo.languageId : null;

if (language.value) {
await chooseType(language.value);
}
@@ -1444,6 +1469,12 @@ function handleTime(time) {
}
return m + ":" + s;
}
// 点击上传音乐
// 点击上传input
function handleFileMusicClick(e) {
musicData.value = null;
e.target.value = null;
}
// 选择文件上传音乐
async function uploadMusic() {
const file = fileMusicInput.value.files[0];
@@ -1451,6 +1482,29 @@ async function uploadMusic() {
musicData.value = file;
let formData = new FormData();
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 {
const res = await videoUpload(formData);
if (res) {
@@ -1777,21 +1831,25 @@ onUnmounted(() => {
font-size: 50px;
line-height: 100px;
text-align: center;
background-color: #ccc;
background-color: rgba(204, 204, 204, 0.1);
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 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0.1;
opacity: 0.5;
.el-icon {
width: 200px;
height: 200px;
font-size: 150px;
}
img {
max-width: 60%;
max-height: 60%;
}
}
span {
display: block;
@@ -2232,7 +2290,7 @@ onUnmounted(() => {
padding: 20px;
// margin-top: 30px;
margin-bottom: 20px;
height: 70px;
// height: 70px;
.btnBox {
display: flex;
justify-content: space-between;
@@ -2245,16 +2303,20 @@ onUnmounted(() => {
}
button {
border-radius: 10px;
height: 30px;
// height: 30px;
line-height: 22px;
padding: 5px 10px;
background-color: #fff;
transition: all 0.3s;
cursor: pointer;
&:hover {
background-color: #000;

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


正在加载...
取消
保存