线上课程 新建、编辑节 上传文件接口方法新改

包括 取消、进度 事件

package.json

@@ -12,6 +12,7 @@
     "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
   },
   "dependencies": {
+    "ali-oss": "^6.3.1",
     "ant-design-vue": "~1.4.4",
     "axios": "^0.18.0",
     "core-js": "^2.6.5",

src/api/aliPath.js

+export default {
+  oss: process.env.VUE_APP_BASE_API2 + '/api/oss/v1',
+  alioss: {
+    region: 'oss-cn-qingdao',
+    bucket: 'zx-zgiot-002',
+    folder: 'education-dev'
+  }
+}

src/api/aliUpData.js

+import OSS from 'ali-oss';
+import aliPath from './aliPath.js';
+import { axios } from '@/utils/request';
+console.log(axios);
+
+const OssSts = {
+  expiration: '',
+  accessKeyId: '',
+  accessKeySecret: '',
+  securityToken: '',
+  requestId: ''
+};
+const formData = function(data) {
+  const _formData = new FormData();
+  for (var i in data) {
+    _formData.append(i, data[i]);
+  }
+  return _formData;
+};
+
+let flag = 0;
+let fileSize = 0;
+let client = '';
+export default {
+   cancelUpload() {
+     return client.cancel();
+   },
+  // 获取OSS的子账号
+  getOssSts() {
+    return axios
+      .post(`${aliPath.oss}/oss/securityToken`, {})
+      .then(response => {
+        if (response.code === 'M0000') {
+          OssSts.expiration = response.data.expiration;
+          OssSts.accessKeyId = response.data.accessKeyId;
+          OssSts.accessKeySecret = response.data.accessKeySecret;
+          OssSts.securityToken = response.data.securityToken;
+          OssSts.requestId = response.data.requestId;
+          return response.data;
+        } else {
+          return Promise.reject();
+        }
+      })
+      .catch(error => {
+        this.$message.error('上传失败！');
+        return Promise.reject(error);
+      });
+  },
+  // 与后台交换携带token的可用链接
+  getSignedUrl({ url }, config = {}) {
+    return axios
+      .post(`${aliPath.oss}/oss/getSignedUrl`, { url }, config)
+      .then(response => {
+        if (response.code === 'M0000') {
+          return response.data;
+        } else {
+          return Promise.reject();
+        }
+      })
+      .catch(error => {
+        return Promise.reject(error);
+      });
+  },
+  // oss直传
+  async ossUploadAli(file, info, progressShow) {
+    try {
+      const option = {
+        region: aliPath.alioss.region,
+        accessKeyId: '',
+        accessKeySecret: '',
+        stsToken: '',
+        bucket: aliPath.alioss.bucket
+      };
+      if (
+        !OssSts.expiration ||
+        new Date(OssSts.expiration).getTime() - Date.now() < 10 * 60 * 1000
+      ) {
+        const result = await this.getOssSts.call(this);
+      }
+      option.accessKeyId = OssSts.accessKeyId;
+      option.accessKeySecret = OssSts.accessKeySecret;
+      option.stsToken = OssSts.securityToken;
+      client = new OSS(option);
+      const type = info.type;
+      const name = `pc_${info.name}_time${Date.now()}.${
+        info.name.split('.')[1]
+      }`;
+      const result = await client.multipartUpload(
+        `${aliPath.alioss.folder}/${name}`,
+        file, {
+          progress: async function(p, checkPoint) {
+            console.log('progress++++++++++++++++++++:', p);
+            fileSize = checkPoint ? checkPoint.fileSize : 0;
+            progressShow.call(this, p);
+          }
+        }
+      );
+      flag = 0;
+      return Promise.resolve(result);
+    } catch (error) {
+      if (
+        error &&
+        error.code === 'InvalidAccessKeyId' &&
+        error.status === 403 &&
+        flag < 3
+      ) {
+        ++flag;
+        OssSts.expiration = '';
+        return await this.ossUploadAli.call(this, file, info);
+      } else {
+        flag = 0;
+        return Promise.reject(error);
+      }
+    }
+  },
+  getFileSize() {
+    return fileSize;
+  }
+};

src/main.js

@@ -29,6 +29,7 @@ import onlineTestUrl from '@/router/onlineTest.url.js';
 // 引入eduUtils工具文件
 import eduUtil from '@/utils/eduUtils.js';
 import interfaceName from '@/views/courseTrain/onlineCourseNew/components/api.js';
+import $service from '@/api/aliUpData';
 
 Vue.use(vuescroll);
 Vue.use(ElementUI);
@@ -44,6 +45,7 @@ Vue.prototype.onlineTestUrl = onlineTestUrl;
 Vue.prototype.eduUtil = eduUtil
 Vue.prototype.interfaceName = interfaceName
 Vue.prototype.interfaceUrl2 = process.env.VUE_APP_BASE_API2 + '/'
+Vue.prototype.$service = $service
 // 判断全局权限
 // const permissions = localStorage.getItem('PERMISSIONS');
 // // 权限指令

src/views/courseTrain/onlineCourseNew/ChapterCatalog.vue

@@ -213,15 +213,11 @@
                   <el-upload
                     ref="upload"
                     :accept="editorAcceptType"
+                     action
                     :multiple = "false"
-                    :action="interfaceUrl2+interfaceName.fileUploadOther"
-                    :data="{type: this.postData.type,path:2,bucket:2}"
+                    :http-request="uploadChapterLog"
                     :show-file-list="false"
-                    :on-error="errorToUploadVideo"
-                    :on-success="startUpload"
                     :before-upload="beforeUpload"
-                    :on-progress="showUploadProgress"
-                    :headers="getHeaders"
                   >
                     <el-button
                       v-show="isNotUploading"
@@ -481,6 +477,22 @@
     },
     props: ['data', 'slId', 'courseInfo', 'parentDirectionCode', 'needClassHours'],
     methods: {
+      uploadChapterLog (option) {
+        let that = this
+        let file = option.file
+        let info = {name:file.name, type:file.type}
+        this.$service.ossUploadAli(file,info,this.showUploadProgress).then(res => {
+          console.log(res)
+          that.startUpload(res)
+        }).catch( err => {
+          console.log(err)
+          if (err.status === 0 && err.name === 'cancel') {
+            console.warn('取消上传！')
+            return 'cancel'
+          }
+          that.errorToUploadVideo()
+        })
+      },
       sendPdfPage (page){
         this.pdfAcceptPage = page;
       },
@@ -490,7 +502,7 @@
       },
       // 取消上传
       canceluploadFile(e) {
-        this.$refs.upload.abort();
+        this.$service.cancelUpload()
         const that = this
         that.uploadFileName = that.saveFileNameEditor;
         if (this.curMethodBox !== this.mediaType) {
@@ -1592,15 +1604,19 @@
         })
       },
       // 开始上传
-      startUpload(res) {
+      startUpload(respones) {
         const that = this
-        console.log(res, '上传成功结果')
         // that.uploadLoading = true
-        that.showProgress = true
-        that.videoUrl = decodeURIComponent(res.data.url)
-        console.log(this.postData.type)
         this.urlCorss = ''// 上传完成后清空路径
-        if (res.code === 'M0000') {
+        if (respones) {
+          const  res = {
+            data: {
+              originalName: respones.name.split('pc_')[1].split('_time')[0],
+              url: respones.res.requestUrls[0].split('?')[0],
+              fileSize: that.$service.getFileSize() === 0 ? 50 : that.$service.getFileSize()}
+          }
+          that.showProgress = true
+          that.videoUrl = decodeURIComponent(res.data.url)
           console.log(res.data, '11111111111111111111111')
           that.saveFileNameEditor = res.data.originalName
           that.uploadFileName = res.data.originalName
@@ -1637,8 +1653,7 @@
                 },800)
               }
             }).catch(err =>{
-              that.isNotUploading = true
-              that.editoruplaodLoading = false
+              that.errorToUploadVideo()
             })
           }
           // }
@@ -1725,15 +1740,14 @@
         this.$message.error('网络接口异常,上传失败')
         this.uploadStatus = 2;
         this.editoruplaodLoading = false
+        that.isNotUploading = true
       },
       showUploadProgress(event,file){
-        console.log(event.percent,'上传进度调试')
-        let that = this
         // console.log(parseInt(event.percent),'进度')
-        if(parseInt(event.percent) >= 99 ){
+        if(parseInt(event * 100) >= 99 ){
           this.uploadProgress = 99;
         }else{
-          this.uploadProgress = parseInt(event.percent)
+          this.uploadProgress = parseInt(event * 100)
         }
       },
     },

src/views/courseTrain/onlineCourseNew/ChapterListTea.vue

@@ -178,14 +178,10 @@
                   :accept="FilterBaseFileType"
                   ref="upload"
                   :multiple = "false"
-                  :action="interfaceUrl2+interfaceName.fileUploadOther"
-                  :data="{path: 2,bucket: 2,type:this.addCourseContent}"
+                   action
+                  :http-request="lessionUpLoad"
                   :show-file-list="false"
-                  :on-error="errorToUploadVideo"
-                  :on-success="successUploadVideo"
                   :before-upload="beforeUploadVideo"
-                  :on-progress="showUploadProgress"
-                  :headers="getHeaders"
                   :auto-upload="true">
                   <el-button
                     slot="trigger"
@@ -436,6 +432,22 @@
 
     },
     methods: {
+      lessionUpLoad (option) {
+        let that = this
+        let file = option.file
+        let info = {name:file.name, type:file.type}
+        this.$service.ossUploadAli(file, info, this.showUploadProgress).then(res => {
+          console.log(res)
+          that.successUploadVideo(res);
+        }).catch( err => {
+          console.log(err)
+          if (err.status === 0 && err.name === 'cancel') {
+            console.warn('取消上传！')
+            return 'cancel';
+          }
+          that.errorToUploadVideo();
+        });
+      },
       // 添加章添加节，鼠标悬浮效果
       blueHide() {
         this.isShow = false;
@@ -660,7 +672,6 @@
         this.videoName = '';
         this.addCourseSteps = 1;
         this.fileSize = '';
-        this.fileSize = '';
         this.videoUrl = '';
         this.mediaTime = '';
         this.uploadSuccess = false;
@@ -1007,15 +1018,20 @@
       },
       // 上传成功的回调
       successUploadVideo(res) {
-        let that = this
-        if(res.code === 'M0000'){
-          let dataUpload = res.data
+        const that = this
+        if (res) {
+          const dataUpload = {
+            originalName: res.name.split('pc_')[1].split('_time')[0],
+            url: res.res.requestUrls[0].split('?')[0],
+            fileSize: that.$service.getFileSize() === 0 ? 50 : that.$service.getFileSize()
+          }
           dataUpload.url = decodeURIComponent(dataUpload.url)
           that.fileName = dataUpload.originalName;
           that.videoUrl = dataUpload.url;
           that.fileUrl = dataUpload.url;
           that.saveFileName = dataUpload.originalName
           that.videoName = dataUpload.originalName
+          that.fileSize = dataUpload.fileSize
           switch (that.addCourseContent) {
             case "0":that.videoFileUrl = dataUpload.url;
               that.audioFileUrl = '';that.pptFileUrl = '';that.pdfFileUrl = '';that.wordFileUrl = '';//清空视频之外的文件变量
@@ -1229,7 +1245,7 @@
       // 取消上传
       abortFileupload(event) {
         const that = this
-        this.$refs.upload.abort()
+        that.$service.cancelUpload()
         switch (that.addCourseContent) {
           case "0":
             that.videoFileUrl = that.videoUrl
@@ -1304,12 +1320,11 @@
       },
       // 文件上传时，展示进度
       showUploadProgress(event, file) {
-        const that = this
         // console.log(parseInt(event.percent),'进度')
-        if (parseInt(event.percent) === 100) {
+        if (parseInt(event * 100) === 100) {
           this.uploadProgress = 99;
         } else {
-          this.uploadProgress = parseInt(event.percent);
+          this.uploadProgress = parseInt(event * 100);
         }
         // console.log(event,'event')
         // console.log(file,'file')