1.删除无用页面

2. UploaderCard.vue 的分片上传接口添加 clientSha256sum 和 uploadId 两个 formdata 参数
3. VideoPostPublish.vue 的 el-upload 上传接口添加 clientSha256sum 参数

src/components/card/UploaderCard.vue

@@ -84,12 +84,13 @@ export default {
         fileParameterName: 'file',
         testChunks: false,
         processParams: (params, file, chunk) => ({
+          clientSha256sum: file.sha256sum,
+          uploadId: file.uniqueIdentifier,
           identifier: file.uniqueIdentifier,
           chunkSize: params.chunkSize,
           totalChunks: params.totalChunks,
           chunkNumber: params.chunkNumber,
-          filename: file.name,
-          sha256sum: file.sha256sum
+          filename: file.name
         }),
         query: () => ({ channelCode: this.videoChannelCode }),
         checkChunkUploadedByResponse: (chunk, message) => {

src/components/upload/PublishAudio.vue

@@ -1,299 +0,0 @@
-<template>
-  <el-row class="movie-list">
-    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>上传音频文件</span>
-          </div>
-          <div class="text item">
-            <uploader
-              class="uploader-example"
-              :options="options"
-              :auto-start="true"
-              @file-added="onFileAdded"
-              @file-success="onFileSuccess"
-              @file-progress="onFileProgress"
-              @file-error="onFileError"
-            >
-              <uploader-unsupport />
-              <uploader-drop>
-                <p>拖动音频文件到此处或</p>
-                <uploader-btn :attrs="attrs">选择音频文件</uploader-btn>
-              </uploader-drop>
-              <uploader-list />
-            </uploader>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>稿件信息</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onSubmit">发布</el-button>
-          </div>
-          <div class="text item">
-            <el-form ref="form" :model="form" label-width="80px">
-              <el-form-item label="标题">
-                <el-input v-model="form.title" style="padding-right: 1px" placeholder="标题不能超过 50 个字符" />
-              </el-form-item>
-              <el-form-item label="描述">
-                <el-input v-model="form.description" type="textarea" autosize style="padding-right: 1px;" />
-              </el-form-item>
-              <el-form-item label="可见范围">
-                <el-select v-model="form.scope" placeholder="选择稿件的可见范围">
-                  <el-option label="本人可见" value="1" />
-                  <el-option label="所有人可见" value="2" />
-                  <el-option label="VIP 可见" value="3" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="定时发布">
-                <el-date-picker
-                  v-model="form.scheduledPubDate"
-                  type="datetime"
-                  placeholder="选择定时发布的时间"
-                />
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-import { getServerInfo } from '@/api/content'
-import { addAudioPost } from '@/api/audio'
-
-export default {
-  name: 'PublishAudio',
-  data() {
-    return {
-      // ****************************************************************************************************************
-      options: null,
-      attrs: {
-        accept: 'audio/*'
-      },
-      // ****************************************************************************************************************
-      form: {
-        channelId: process.env.VUE_APP_UPLOAD_AUDIO_CHANNEL,
-        audioFileId: null,
-        audioUrl: null,
-        title: null,
-        description: null,
-        scope: '1',
-        scheduledPubDate: null
-      }
-    }
-  },
-  created() {
-    getServerInfo(this.form.channelId).then(res => {
-      if (res.code === 0) {
-        const resData = res.data
-        this.options = {
-          target: resData.ossUrl,
-          chunkSize: resData.maxSize,
-          fileParameterName: 'file',
-          testChunks: false,
-          query: (file, chunk) => {
-            return {
-              channelId: this.form.channelId
-            }
-          },
-          headers: {
-            Authorization: 'Bearer ' + resData.token
-          },
-          withCredentials: false
-        }
-      } else {
-        this.$notify({
-          title: '提示',
-          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
-          type: 'error',
-          duration: 3000
-        })
-      }
-    }).catch(error => {
-      this.$notify({
-        title: '提示',
-        message: error.message,
-        type: 'warning',
-        duration: 3000
-      })
-    })
-  },
-  methods: {
-    // ****************************************************************************************************************
-    onFileAdded(file) {
-      this.setTitle(file.file.name)
-    },
-    onFileProgress(rootFile, file, chunk) {
-    },
-    onFileSuccess(rootFile, file, response, chunk) {
-      const res = JSON.parse(response)
-      if (res.code === 0) {
-        const resData = res.data
-        this.form.audioFileId = resData.uploadId
-        this.form.audioUrl = resData.url
-        this.$notify({
-          title: '提示',
-          message: '音频已上传',
-          type: 'warning',
-          duration: 3000
-        })
-      }
-    },
-    onFileError(rootFile, file, response, chunk) {
-      this.$notify({
-        title: '提示',
-        message: '文件上传错误',
-        type: 'warning',
-        duration: 3000
-      })
-    },
-    // ****************************************************************************************************************
-    setTitle(title) {
-      if (title.length > 50) {
-        this.form.title = title.substring(0, 50)
-        this.form.description = title
-      } else {
-        this.form.title = title
-      }
-    },
-    onSubmit() {
-      if (!this.form.audioFileId) {
-        this.$notify({
-          title: '提示',
-          message: '你还没有上传音频',
-          type: 'warning',
-          duration: 3000
-        }
-        )
-        return
-      }
-
-      if (this.form.title === null) {
-        this.$notify({
-          title: '提示',
-          message: '稿件标题不能为空',
-          type: 'warning',
-          duration: 3000
-        }
-        )
-        return
-      }
-
-      addAudioPost(this.form).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            title: '提示',
-            message: '投稿成功',
-            type: 'warning',
-            duration: 3000
-          })
-          this.$router.push('/post/list/audio')
-        } else {
-          this.$notify({
-            title: '提示',
-            message: res.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style>
-.uploader-example {
-  width: 500px;
-  padding: 15px;
-  margin: 40px auto 0;
-  font-size: 12px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
-}
-.uploader-example .uploader-btn {
-  margin-right: 4px;
-}
-.uploader-example .uploader-list {
-  max-height: 440px;
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 320px;
-  height: 240px;
-  line-height: 178px;
-  text-align: center;
-}
-.avatar {
-  width: 320px;
-  height: 240px;
-  display: block;
-}
-
-.uploader-example {
-  width: 500px;
-  padding: 15px;
-  margin: 40px auto 0;
-  font-size: 12px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
-}
-.uploader-example .uploader-btn {
-  margin-right: 4px;
-}
-.uploader-example .uploader-list {
-  max-height: 440px;
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 320px;
-  height: 240px;
-  line-height: 178px;
-  text-align: center;
-}
-.avatar {
-  width: 320px;
-  height: 240px;
-  display: block;
-}
-</style>

src/components/upload/PublishFile.vue

@@ -1,197 +0,0 @@
-<template>
-  <el-row class="movie-list">
-    <el-col :md="16" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>上传文件</span>
-          </div>
-          <div class="text item">
-            <uploader
-              v-if="options !== null"
-              class="uploader-example"
-              :options="options"
-              :auto-start="true"
-              @file-added="onFileAdded"
-              @file-success="onFileSuccess"
-              @file-progress="onFileProgress"
-              @file-error="onFileError"
-            >
-              <uploader-unsupport />
-              <uploader-drop>
-                <p>拖动文件到此处或</p>
-                <uploader-btn :attrs="attrs">选择文件</uploader-btn>
-              </uploader-drop>
-              <uploader-list />
-            </uploader>
-          </div>
-        </el-card>
-      </el-row>
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>文件信息</span>
-          </div>
-          <div class="text item">
-            <el-form ref="form" :model="uploadedFile" label-width="80px">
-              <el-form-item label="UploadId">
-                <el-input v-model="uploadedFile.uploadId" style="width: 70%; padding-right: 10px" readonly />
-              </el-form-item>
-              <el-form-item label="URL">
-                <el-input v-model="uploadedFile.url" type="textarea" style="width: 70%; padding-right: 10px" readonly />
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { getFileChannelInfo } from '@/api/file'
-import { hashFile } from '@/utils/functions'
-
-export default {
-  name: 'PublishFile',
-  data() {
-    return {
-      // ****************************************************************************************************************
-      options: null,
-      attrs: {
-        accept: '*'
-      },
-      uploadedFile: {
-        uploadId: 'null',
-        url: ''
-      }
-    }
-  },
-  created() {
-    getFileChannelInfo().then(res => {
-      if (res.code === 0) {
-        const resData = res.data
-        this.options = {
-          target: resData.ossUrl,
-          // 分块大小 10MB
-          chunkSize: 1024 * 1024 * 10,
-          // 失败自动重传次数
-          maxChunkRetries: 3,
-          fileParameterName: 'file',
-          testChunks: true,
-          // 服务器分片校验函数, 秒传及断点续传基础
-          checkChunkUploadedByResponse: function(chunk, message) {
-            const objMessage = JSON.parse(message)
-            const respData = objMessage.data
-            if (respData.skipUpload) {
-              return true
-            }
-            return (respData.uploaded || []).indexOf(chunk.offset + 1) >= 0
-          },
-          query: (file, chunk) => {
-            return {
-              channelCode: resData.channelCode,
-              multiparts: ''
-            }
-          },
-          headers: {
-            Authorization: 'Bearer ' + resData.token
-          },
-          withCredentials: false
-        }
-      } else {
-        this.$notify({
-          title: '提示',
-          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
-          type: 'error',
-          duration: 3000
-        })
-      }
-    }).catch(error => {
-      this.$notify({
-        title: '提示',
-        message: error.message,
-        type: 'warning',
-        duration: 3000
-      })
-    })
-  },
-  mounted() {
-  },
-  methods: {
-    // ****************************************************************************************************************
-    onFileAdded(file) {
-      if (file.file.size > 1024 * 1024 * 1024 * 20) {
-        file.cancel()
-        this.$notify({
-          title: '提示',
-          message: '文件应小于 20GB',
-          type: 'warning',
-          duration: 3000
-        })
-        return
-      }
-
-      file.pause()
-      hashFile(file.file).then(result => {
-        this.startUpload(result.sha256sum, file)
-      })
-    },
-    startUpload(sha256sum, file) {
-      file.uniqueIdentifier = sha256sum
-      file.resume()
-      // this.statusRemove(file.id)
-    },
-    onFileProgress(rootFile, file, chunk) {
-    },
-    onFileSuccess(rootFile, file, response, chunk) {
-      const resp = JSON.parse(response)
-      if (resp.code === 0) {
-        this.uploadedFile.uploadId = resp.data.uploadId
-        this.uploadedFile.url = resp.data.url
-        this.$notify({
-          title: '提示',
-          message: '文件已上传',
-          type: 'warning',
-          duration: 3000
-        })
-      } else {
-        this.$notify({
-          title: '提示',
-          message: resp.msg,
-          type: 'warning',
-          duration: 3000
-        })
-      }
-    },
-    onFileError(rootFile, file, response, chunk) {
-      // const res = JSON.parse(response)
-      this.$notify({
-        title: '提示',
-        message: '文件上传错误',
-        type: 'warning',
-        duration: 3000
-      })
-    }
-  }
-}
-</script>
-
-<style>
-.uploader-example {
-  width: 500px;
-  padding: 15px;
-  margin: 40px auto 0;
-  font-size: 12px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
-}
-.uploader-example .uploader-btn {
-  margin-right: 4px;
-}
-.uploader-example .uploader-list {
-  max-height: 440px;
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-</style>

src/views/post/VideoPostPublish.vue

@@ -157,7 +157,7 @@ export default {
       // 封面上传相关
       imgOssUrl: '',
       imgHeaders: { Authorization: '' },
-      imgData: { channelCode: null },
+      imgData: { clientSha256sum: null },
       coverUrl: null,
 
       // 分区数据
@@ -255,7 +255,6 @@ export default {
       if (res.code === 0) {
         this.imgOssUrl = res.data.ossUrl
         this.imgHeaders.Authorization = 'Bearer ' + res.data.token
-        this.imgData.channelCode = res.data.channelCode
       }
     },
 
@@ -279,13 +278,12 @@ export default {
           this.$message.error(error.message)
         })
       } else {
-        const { uploadId, file, channelCode } = uploadResult
+        const { uploadId, file } = uploadResult
         // 自动截取视频封面
         this.generateLocalCover(file.file)
 
         addVideoFile({
           videoFileId: uploadId,
-          channelCode: channelCode,
           filename: file.name
         }).then(resp => {
           if (resp.code === 0) {
@@ -325,7 +323,7 @@ export default {
       // 封装 FormData 手动上传截取的封面
       const formData = new FormData()
       formData.append('file', blobFile)
-      formData.append('channelCode', this.imgData.channelCode)
+      formData.append('clientSha256sum', '')
 
       fetch(this.imgOssUrl, {
         method: 'POST',
@@ -347,6 +345,11 @@ export default {
       const isLt10M = file.size / 1024 / 1024 < 10
       if (!isType) this.$message.error('封面只能是 JPG 或 PNG 格式!')
       if (!isLt10M) this.$message.error('封面大小不能超过 10MB!')
+
+      if (isType && isLt10M) {
+        this.imgData.clientSha256sum = ''
+      }
+
       return isType && isLt10M
     },