template div class=box el-row h3 style=margin-top 0px $routequerytitle h3el-row 新闻标题:el-input v-model=title placeholder=请输入新闻标题el-inputbr br 发布日期:el-date-picker format=yyyy 年 MM 月
要修改的代码:
- 在模板中添加视频上传组件和文件上传组件:
<el-upload
class="upload-demo"
action="http://localhost:7070/uploading"
:on-success="handleVideoUploadSuccess"
:before-upload="beforeVideoUpload"
>
<el-button slot="trigger" size="small" type="primary">上传视频</el-button>
</el-upload>
<el-upload
class="upload-demo"
action="http://localhost:7070/uploading"
:on-success="handleFileUploadSuccess"
:before-upload="beforeFileUpload"
>
<el-button slot="trigger" size="small" type="primary">上传文件</el-button>
</el-upload>
- 在 data 中添加 video 和 file 属性:
data() {
return {
title: '', // 标题内容
releaseTime: '', // 发布日期
content: '', // 新闻内容
picture: null,
photo: '',
newsCategoryId: 2,
editorOption: {
placeholder: '请输入正文',
modules: {
ImageExtend: {
...
},
toolbar: {
container: [
...
['image'], // 上传图片、上传视频、上传文件
...
],
...
}
}
}, // 编辑器新闻对象
fileList: [],
video: null,
file: null
}
},
- 添加视频上传和文件上传的方法:
methods: {
...
beforeVideoUpload(file) {
const isVideo = file.type.indexOf('video') !== -1
if (!isVideo) {
this.$message.error('只能上传视频文件')
}
const isLt10M = file.size / 1024 / 1024 < 10
if (!isLt10M) {
this.$message.error('视频大小不能超过 10MB')
}
return isVideo && isLt10M
},
handleVideoUploadSuccess(response, file) {
this.video = 'http://localhost:7070/' + response.data
this.$message.success('视频上传成功')
},
beforeFileUpload(file) {
const isLt10M = file.size / 1024 / 1024 < 10
if (!isLt10M) {
this.$message.error('文件大小不能超过 10MB')
}
return isLt10M
},
handleFileUploadSuccess(response, file) {
this.file = 'http://localhost:7070/' + response.data
this.$message.success('文件上传成功')
}
}
- 在 submit 方法中将视频和文件链接添加到新闻对象中:
submit() {
const data = {
newsCategoryId: this.newsCategoryId,
content: this.content,
title: this.title,
releaseTime: this.releaseTime,
videoUrl: this.video,
fileUrl: this.file
}
...
}
解释:
-
在模板中添加了两个 el-upload 组件,分别用于视频上传和文件上传。action 属性指定了上传地址,on-success 属性指定了上传成功后的回调方法,before-upload 属性指定了上传前的验证方法。
-
在 data 中添加了 video 和 file 两个属性,用于保存上传的视频和文件链接。
-
添加了 beforeVideoUpload、handleVideoUploadSuccess、beforeFileUpload 和 handleFileUploadSuccess 四个方法。其中 beforeVideoUpload 方法用于验证上传的文件是否为视频文件并且大小是否小于 10MB,handleVideoUploadSuccess 方法用于将上传成功后返回的视频链接保存到 video 属性中,beforeFileUpload 方法用于验证上传的文件大小是否小于 10MB,handleFileUploadSuccess 方法用于将上传成功后返回的文件链接保存到 file 属性中。
-
在 submit 方法中将 video 和 file 属性添加到新闻对象中,上传到服务器
原文地址: https://www.cveoy.top/t/topic/dpQq 著作权归作者所有。请勿转载和采集!