要修改的代码:

  1. 在模板中添加视频上传组件和文件上传组件:
<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>
  1. 在 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
  }
},
  1. 添加视频上传和文件上传的方法:
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('文件上传成功')
  }
}
  1. 在 submit 方法中将视频和文件链接添加到新闻对象中:
submit() {
  const data = {
    newsCategoryId: this.newsCategoryId,
    content: this.content,
    title: this.title,
    releaseTime: this.releaseTime,
    videoUrl: this.video,
    fileUrl: this.file
  }
  ...
}

解释:

  1. 在模板中添加了两个 el-upload 组件,分别用于视频上传和文件上传。action 属性指定了上传地址,on-success 属性指定了上传成功后的回调方法,before-upload 属性指定了上传前的验证方法。

  2. 在 data 中添加了 video 和 file 两个属性,用于保存上传的视频和文件链接。

  3. 添加了 beforeVideoUpload、handleVideoUploadSuccess、beforeFileUpload 和 handleFileUploadSuccess 四个方法。其中 beforeVideoUpload 方法用于验证上传的文件是否为视频文件并且大小是否小于 10MB,handleVideoUploadSuccess 方法用于将上传成功后返回的视频链接保存到 video 属性中,beforeFileUpload 方法用于验证上传的文件大小是否小于 10MB,handleFileUploadSuccess 方法用于将上传成功后返回的文件链接保存到 file 属性中。

  4. 在 submit 方法中将 video 和 file 属性添加到新闻对象中,上传到服务器


原文地址: https://www.cveoy.top/t/topic/dpQq 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录