kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

25600

Browse Source
This commit is contained in:
yanran200730
2021-12-23 18:05:46 +08:00
parent aa1f45e10a
commit ac46ebb348
2 changed files with 119 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
packages/3.0.0/AppContentInfo/components/Add.vue vendored
View File

@@ -1,5 +1,5 @@
<template>
<ai-detail>
<ai-detail class="content-add">
<template slot="title">
<ai-title :title="params.id ? '编辑内容发布' : '添加内容发布'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
</ai-title>
@@ -15,7 +15,7 @@
<ai-area-select clearable @fullname="v => form.areaName = v" always-show :instance="instance" v-model="form.areaId" :disabled-level="disabledLevel"></ai-area-select>
</el-form-item>
<el-form-item prop="contentType" label="文章类型" :rules="[{required: true, message: '请选择文章类型', trigger: 'change'}]">
<el-select style="width: 100%;" v-model="form.contentType" size="small" placeholder="请选择文章类型">
<el-select style="width: 100%;" @change="onChange" v-model="form.contentType" size="small" placeholder="请选择文章类型">
<el-option
v-for="item in contentTypeList"
:key="item.value"
@@ -37,12 +37,13 @@
<el-form-item v-if="form.contentType === '0'" label="正文" prop="content" style="width: 100%;" :rules="[{required: true, message: '请输入内容', trigger: 'change'}]">
<ai-editor v-model="form.content" :instance="instance"/>
</el-form-item>
<el-form-item v-if="form.contentType === '0'" label="图片" prop="files" style="width: 100%;">
<el-form-item v-if="form.contentType === '0'" label="附件" prop="files" style="width: 100%;">
<ai-uploader
:instance="instance"
v-model="form.files"
fileType="img"
acceptType=".jpg,.png,.jpeg"
fileType="file"
showTips
key="file"
:limit="9">
<template slot="tips">
<p>最多上传9张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
@@ -50,13 +51,21 @@
</ai-uploader>
</el-form-item>
<el-form-item v-if="form.contentType === '1'" label="视频" prop="files" style="width: 100%;" :rules="[{required: true, message: '请上传视频', trigger: 'change'}]">
<ai-uploader
:instance="instance"
v-model="form.files"
acceptType=".mp4"
fileType="video"
:limit="1">
</ai-uploader>
<el-upload :show-file-list="false" ref="upload1" action :http-request="submitUpload" :accept="accept" :limit="1">
<div class="video" v-if="!form.files.length">
<div class="icon">
<ai-icon type="svg" icon="iconVideo"/>
<span>上传视频</span>
</div>
<span class="tips">支持mp4格式，单个文件最大100MB</span>
</div>
</el-upload>
<video class="video-com" style="width:100%; height:100%; object-fit: fill;" muted
:src="form.files[0].url" controls="controls" v-if="form.files.length"></video>
<el-upload :show-file-list="false" ref="upload2" action :http-request="submitUpload" :accept="accept"
:limit="1" v-if="form.files.length">
<el-button style="margin-top: 10px;">重新选择</el-button>
</el-upload>
</el-form-item>
</el-form>
</template>
@@ -70,6 +79,7 @@
</template>
<script>
import mp4box from 'mp4box'
import { mapState } from 'vuex'
export default {
name: 'Add',
@@ -83,6 +93,7 @@
data () {
return {
info: {},
accept: '.mp4',
form: {
title: '',
content: '',
@@ -131,6 +142,53 @@
})
},
onChange () {
this.form.files = []
},
submitUpload(file) {
this.$refs['upload1']?.clearFiles();
this.$refs['upload2']?.clearFiles();
this.$refs['ruleForm']?.clearValidate('videoFile');
const fileType = file.file.name.split(".")[1];
const size = file.file.size / 1024 / 1024 > 100;
let mp4boxfile = mp4box.createFile();
const reader = new FileReader();
reader.readAsArrayBuffer(file.file);
reader.onload = (e) => {
const arrayBuffer = e.target.result;
arrayBuffer.fileStart = 0;
mp4boxfile.appendBuffer(arrayBuffer);
};
mp4boxfile.onReady = (info) => {
let codec = info.mime.match(/codecs="(\S*),/)[1]
if (codec.indexOf('avc') === -1) {
return this.$message.error("视频编码格式不支持")
}
if (size) {
return this.$message.error("视频大小不能超过100M");
}
if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) {
let formData = new FormData()
formData.append('file', file.file);
this.instance.post(`/admin/file/add-unlimited`, formData).then(res => {
if (res && res.data) {
let videoList = res.data[0].split(";");
this.form.files = [{
id: videoList[1],
url: videoList[0]
}]
}
})
} else {
return this.$message.error("视频格式错误")
}
}
},
getCateList () {
this.instance.post(`/app/appcontentmodulecategory/list`, null, {
params: {
@@ -182,4 +240,52 @@
</script>
<style scoped lang="scss">
.content-add {
.video {
width: 640px;
height: 360px;
border-radius: 4px;
border: 1px dashed #D0D4DC;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
span:nth-child(2) {
display: inline-block;
font-size: 16px;
color: #333333;
line-height: 30px;
}
.iconfont {
display: inline-block;
font-size: 40px;
color: #2266FF;
}
}
.tips {
display: inline-block;
font-size: 12px;
color: #999999;
line-height: 26px;
}
}
.video-com {
width: 640px;
height: 360px;
background: rgba(0, 0, 0, 0.5);
border-radius: 2px;
border: 1px solid #D0D4DC;
margin-top: -40px;
}
}
</style>