Przeglądaj źródła

上传 video 和 image 只返回一个 uploadId

reghao 2 lat temu
rodzic
commit
c6b1486505

+ 19 - 6
src/components/upload/EditVideo.vue

@@ -48,9 +48,11 @@
                 action="//oss.reghao.cn/"
                 :headers="imgHeaders"
                 :data="imgData"
+                :with-credentials="true"
                 :show-file-list="false"
                 :before-upload="beforeAvatarUpload"
                 :on-success="handleAvatarSuccess"
+                :on-change="handleOnChange"
               >
                 <img :src="coverUrl" class="avatar">
               </el-upload>
@@ -121,11 +123,12 @@ export default {
         Authorization: ''
       },
       imgData: {
-        channelId: 3
+        channelId: 5
       },
       /***********************************************************************/
       coverUrl: null,
       coverUrl1: null,
+      coverFileId: null,
       videoFileId: null,
       // 提交给后端的数据
       videoInfoForm: {
@@ -169,7 +172,6 @@ export default {
     getServerInfo(2).then(res => {
       if (res.code === 0) {
         const resData = res.data
-        console.log(resData.token)
         this.options.target = resData.ossUrl
         this.options.chunkSize = resData.maxSize
         this.options.headers.Authorization = "Bearer " + resData.token
@@ -192,7 +194,8 @@ export default {
 
     getServerInfo(5).then(res => {
       if (res.code === 0) {
-        this.imgHeaders.Authorization = 'Bearer ' + res.data.token
+        const resData = res.data
+        this.imgHeaders.Authorization = 'Bearer ' + resData.token
       } else {
         this.$notify({
           title: '提示',
@@ -270,12 +273,21 @@ export default {
       const localImageUrl = URL.createObjectURL(file.raw)
       if (res.code === 0) {
         const resData = res.data
-        const uploadId = resData.uploadId
-        this.coverUrl = resData.url
+        this.coverFileId = resData.uploadId
+        this.coverUrl = localImageUrl
         this.coverUrl1 = resData.url
       } else {
+        this.$notify({
+          title: '提示',
+          message: '视频封面上传失败,请重试!' + res.msg,
+          type: 'warning',
+          duration: 3000
+        })
       }
     },
+    handleOnChange(file, fileList) {
+    },
+    /***********************************************************************/
     onReturnVideo() {
       this.$router.push('/post/video')
     },
@@ -311,7 +323,8 @@ export default {
 
       const videoCover = {
         videoId: this.videoInfoForm.videoId,
-        coverUrl: this.coverUrl1
+        coverUrl: this.coverUrl1,
+        coverFileId: this.coverFileId
       }
 
       updateVideoCover(videoCover).then(res => {

+ 40 - 26
src/components/upload/PublishVideo.vue

@@ -40,11 +40,13 @@
                 action="//oss.reghao.cn/"
                 :headers="imgHeaders"
                 :data="imgData"
+                :with-credentials="true"
                 :show-file-list="false"
                 :before-upload="beforeAvatarUpload"
                 :on-success="handleAvatarSuccess"
+                :on-change="handleOnChange"
               >
-                <img v-if="form.coverUrl" :src="form.coverUrl" class="avatar">
+                <img v-if="coverUrl" :src="coverUrl" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon" />
               </el-upload>
             </el-tooltip>
@@ -144,6 +146,7 @@ export default {
       imgData: {
         channelId: 5
       },
+      coverUrl: null,
       /***********************************************************************/
       categoryMap: {
         Set: function(key, value) { this[key] = value },
@@ -158,7 +161,7 @@ export default {
       ],
       form: {
         videoFileId: null,
-        coverUrl: null,
+        coverFileId: null,
         title: null,
         description: null,
         categoryPid: null,
@@ -271,28 +274,6 @@ export default {
         })
     },
     /***********************************************************************/
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg'
-      const isLt2M = file.size / 1024 / 1024 < 2
-      if (!isJPG) {
-        this.$message.error('上传头像图片只能是 JPG 格式!')
-      }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
-      }
-      return isJPG && isLt2M
-    },
-    handleAvatarSuccess(res, file) {
-      const localUrl = URL.createObjectURL(file.raw)
-      if (res.code === 0) {
-        const resData = res.data
-        const uploadId = resData.uploadId
-        this.form.coverUrl = resData.url
-      } else {
-
-      }
-    },
-    /***********************************************************************/
     // 选择视频后获取视频的分辨率和时长, 并截取第一秒的内容作为封面
     processVideo(file) {
       return new Promise((resolve, reject) => {
@@ -346,6 +327,8 @@ export default {
 
         const coverFile = new File([u8arr], 'cover.jpg', { type: 'image/jpeg' })
         if (coverFile instanceof File) {
+          const localImageUrl = URL.createObjectURL(coverFile)
+
           const formData = new FormData()
           formData.append('file', coverFile)
           formData.append('channelId', 5)
@@ -356,8 +339,9 @@ export default {
             body: formData
           }).then(response => response.json()).then(json => {
               if (json.code === 0) {
+                this.coverUrl = localImageUrl
                 const resData = json.data
-                this.form.coverUrl = resData.url
+                this.form.coverFileId = resData.uploadId
               } else {
                 this.$notify({
                   title: '提示',
@@ -375,6 +359,36 @@ export default {
       // videoElem.removeEventListener('canplay', arguments.callee)
     },
     /***********************************************************************/
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+    handleAvatarSuccess(res, file) {
+      const localImageUrl = URL.createObjectURL(file.raw)
+      if (res.code === 0) {
+        const resData = res.data
+        this.coverUrl = localImageUrl;
+        this.form.coverFileId = resData.uploadId
+      } else {
+        this.$notify({
+          title: '提示',
+          message: '视频封面上传失败,请重试!' + res.msg,
+          type: 'warning',
+          duration: 3000
+        })
+      }
+    },
+    handleOnChange(file, fileList) {
+      console.log('封面改变')
+    },
+    /***********************************************************************/
     setTitle(title) {
       if (title.length > 50) {
         this.form.title = title.substring(0, 50)
@@ -435,7 +449,7 @@ export default {
         return
       }
 
-      if (!this.form.coverUrl) {
+      if (!this.form.coverFileId) {
         this.$notify({
             title: '提示',
             message: '你还没有上传视频封面',