Bladeren bron

根据 channelId 自动获取视频文件和封面文件需要上传的 oss-store 节点 url

reghao 2 jaren geleden
bovenliggende
commit
58cfc7a7be
1 gewijzigde bestanden met toevoegingen van 48 en 22 verwijderingen
  1. 48 22
      src/components/upload/PublishVideo.vue

+ 48 - 22
src/components/upload/PublishVideo.vue

@@ -8,6 +8,7 @@
           </div>
           <div class="text item">
             <uploader
+              v-if="options !== null"
               class="uploader-example"
               :options="options"
               :auto-start="true"
@@ -35,13 +36,14 @@
             <el-tooltip class="item" effect="dark" content="点击上传图片" placement="top-end">
               <el-upload
                 class="avatar-uploader"
-                :action="actionUrl"
+                :action="imgOssUrl"
                 :headers="imgHeaders"
                 :data="imgData"
-                :with-credentials="true"
+                :with-credentials="false"
                 :show-file-list="false"
                 :before-upload="beforeAvatarUpload"
                 :on-success="handleAvatarSuccess"
+                :on-error="handleAvatarError"
                 :on-change="handleOnChange"
               >
                 <img v-if="coverUrl" :src="coverUrl" class="avatar">
@@ -121,33 +123,33 @@ export default {
   name: 'PublishVideo',
   data() {
     return {
-      actionUrl: process.env.VUE_APP_OSS_URL,
       // ****************************************************************************************************************
-      options: {
-        target: process.env.VUE_APP_OSS_URL,
+      options: null,
+      options1: {
+        target: '',
         chunkSize: 1024 * 1024 * 1024 * 10, // 10GiB
         fileParameterName: 'file',
         testChunks: false,
         query: (file, chunk) => {
           return {
-            channelId: 2
+            channelId: 104
           }
         },
         headers: {
           Authorization: ''
         },
-        withCredentials: true
+        withCredentials: false
       },
       attrs: {
         accept: 'video/*'
       },
       // ****************************************************************************************************************
-      imgOssUrl: null,
+      imgOssUrl: '',
       imgHeaders: {
         Authorization: ''
       },
       imgData: {
-        channelId: 5
+        channelId: 105
       },
       coverUrl: null,
       // ****************************************************************************************************************
@@ -164,7 +166,8 @@ export default {
       ],
       form: {
         videoFileId: null,
-        coverFileId: null,
+        channelId: 104,
+        coverUrl: null,
         title: null,
         description: null,
         categoryPid: null,
@@ -176,12 +179,28 @@ export default {
     }
   },
   created() {
-    getServerInfo(2).then(res => {
+    getServerInfo(this.form.channelId).then(res => {
       if (res.code === 0) {
         const resData = res.data
-        this.options.target = resData.ossUrl
+        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
+        }
+
+        /*this.options.target = resData.ossUrl
         this.options.chunkSize = resData.maxSize
-        this.options.headers.Authorization = 'Bearer ' + resData.token
+        this.options.headers.Authorization = 'Bearer ' + resData.token*/
       } else {
         this.$notify({
           title: '提示',
@@ -193,13 +212,13 @@ export default {
     }).catch(error => {
       this.$notify({
         title: '提示',
-        message: error.message,
+        message: '获取 OSS 服务器地址失败, 暂时无法上传视频文件',
         type: 'warning',
         duration: 3000
       })
     })
 
-    getServerInfo(5).then(res => {
+    getServerInfo(this.imgData.channelId).then(res => {
       if (res.code === 0) {
         const resData = res.data
         this.imgOssUrl = resData.ossUrl
@@ -207,7 +226,7 @@ export default {
       } else {
         this.$notify({
           title: '提示',
-          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
+          message: '获取 OSS 服务器地址失败, 暂时无法上传视频封面',
           type: 'error',
           duration: 3000
         })
@@ -215,7 +234,7 @@ export default {
     }).catch(error => {
       this.$notify({
         title: '提示',
-        message: error.message,
+        message: '获取 OSS 服务器地址失败, 暂时无法上传视频封面',
         type: 'warning',
         duration: 3000
       })
@@ -264,7 +283,6 @@ export default {
     },
     onFileError(rootFile, file, response, chunk) {
       const res = JSON.parse(response)
-      console.log(res.msg)
       this.$notify({
         title: '提示',
         message: '视频文件上传错误',
@@ -338,7 +356,7 @@ export default {
 
           const formData = new FormData()
           formData.append('file', coverFile)
-          formData.append('channelId', 5)
+          formData.append('channelId', this.imgData.channelId)
           fetch(process.env.VUE_APP_OSS_URL, {
             headers: this.imgHeaders,
             method: 'POST',
@@ -348,7 +366,7 @@ export default {
             if (json.code === 0) {
               this.coverUrl = URL.createObjectURL(coverFile)
               const resData = json.data
-              this.form.coverFileId = resData.uploadId
+              this.form.coverUrl = resData.url
             } else {
               this.$notify({
                 title: '提示',
@@ -381,7 +399,7 @@ export default {
       if (res.code === 0) {
         const resData = res.data
         this.coverUrl = URL.createObjectURL(file.raw)
-        this.form.coverFileId = resData.uploadId
+        this.form.coverUrl = resData.url
       } else {
         this.$notify({
           title: '提示',
@@ -391,6 +409,14 @@ export default {
         })
       }
     },
+    handleAvatarError(error, file) {
+      this.$notify({
+        title: '提示',
+        message: '视频封面上传失败,请重试!' + error,
+        type: 'warning',
+        duration: 3000
+      })
+    },
     handleOnChange(file, fileList) {
     },
     // ****************************************************************************************************************
@@ -454,7 +480,7 @@ export default {
         return
       }
 
-      if (!this.form.coverFileId) {
+      if (!this.form.coverUrl) {
         this.$notify({
           title: '提示',
           message: '你还没有上传视频封面',