修改视频上传

src/components/EducationvideoList.vue

@@ -114,6 +114,7 @@
             <span v-loading="scLoad" style="display:inline-block;width:50px;height:50px"></span>
             <span style="position: relative;top: -23px;">{{$t('objFill.v101.shangczqinsh')}}</span>
           </p>
+          <AliOssUploader @success="uploadSuccess" @error="uploadError" :file="uploadFile" v-if="uploadFile" />
         </el-form-item>
       </el-form>
       <div style="text-align:right;margin-bottom:10px">
@@ -132,8 +133,12 @@
   </div>
 </template>
 <script>
+import AliOssUploader from '@/components/common/AliOssUploader.vue'
   export default {
     name: 'Educationvideo',
+    components: {
+      AliOssUploader
+    },
     created() {
       let userInfo = this.getLocalStorage()
       this.msg.CreateBy = userInfo.EmployeeId
@@ -194,6 +199,7 @@
         baseurl: 'http://vt-im-bucket.oss-cn-chengdu.aliyuncs.com',
         windowHeight: 0,
         nodata: false,
+        uploadFile: null,
       }
     },
     mounted() {
@@ -258,6 +264,9 @@
           this.Error(this.$t('objFill.qingsczqdspgs'));
           return;
         }
+        this.scLoad = true;
+        this.uploadFile = file.file
+        return
         let newArr = [];
         newArr.push(file.file);
         let path = "/Sale/Uploadvideo/";
@@ -269,6 +278,16 @@
           this.addMsg.Cover = this.addMsg.VideoAddress + lastUrl;
         });
       },
+      uploadSuccess(result) {
+        console.log('uploadSuccess: ',result)
+        this.scLoad = false;
+        this.addMsg.VideoAddress = result
+        this.addMsg.Cover = `${result}?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast`;
+      },
+      uploadError(error) {
+        this.Error(error)
+        this.uploadFile = null
+      },
       handleCurrentChange() {
         this.msg.pageIndex = this.msg.pageIndex + 1;
         this.getList();

src/components/common/AliOssUploader.vue

+<template>
+  <div class="ali-oss-uploader">
+    <!-- 上传状态展示 -->
+    <div v-if="status === 'uploading'" class="upload-status">
+      <div class="progress-info">
+        <span>上传进度：{{ progress }}%</span>
+        <!-- <span>速度：{{ speed }}</span> -->
+      </div>
+      <div class="progress-bar">
+        <div class="progress-fill" :style="{ width: progress + '%' }"></div>
+      </div>
+    </div>
+
+    <!-- 完成/错误状态 -->
+    <div v-else class="status-message">
+      <span v-if="status === 'success'" class="success">✓ 上传成功</span>
+      <span v-else-if="status === 'error'" class="error">✗ 上传失败: {{ errorMsg }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import OSS from 'ali-oss'
+import co from 'co';
+export default {
+  name: 'AliOssUploader',
+  props: {
+    file: {
+      type: File,
+      required: true
+    }
+  },
+  data() {
+    return {
+      status: 'pending', // pending | uploading | success | error
+      progress: 0,
+      speed: '0 KB/s',
+      timeRemaining: '--',
+      errorMsg: '',
+      lastTime: null,
+      lastLoaded: 0,
+      speedSamples: []
+    }
+  },
+  watch: {
+    file: {
+      immediate: true,
+      handler(newFile) {
+        if (newFile) {
+          this.startUpload(newFile)
+        }
+      }
+    }
+  },
+  methods: {
+    createUploadSpeedCalculator(fileSize) {
+      let lastTime = Date.now();
+      let lastLoaded = 0;
+
+      return function (progress) {
+        const now = Date.now();
+        const loaded = progress * fileSize; // 当前上传的字节数
+        const timeDiff = (now - lastTime) / 1000; // 时间间隔，单位秒
+        const bytesDiff = loaded - lastLoaded; // 上传的字节数差
+
+        let speed = 0; // 上传速度
+        if (timeDiff > 0) {
+          speed = bytesDiff / timeDiff; // bytes per second
+        }
+
+        lastTime = now;
+        lastLoaded = loaded;
+
+        return speed; // 返回本次实时上传速度（单位：B/s）
+      };
+    },
+    async startUpload(file) {
+      this.status = 'uploading'
+      const that = this
+      this.apipost('userauth_get_GetSTSToken', {}, async res => {
+        if (res.data.resultCode == 1) {
+          const { Region, AccessKeyId, AccessKeySecret, SecurityToken, Bucket } = res.data.data
+          const client = new OSS({
+            region: 'oss-cn-chengdu',
+            accessKeyId: AccessKeyId,
+            accessKeySecret: AccessKeySecret,
+            stsToken: SecurityToken,
+            bucket: Bucket
+          })
+
+          const { v4: uuidv4 } = require('uuid');
+          const fileName = uuidv4().replace(/-/g, '') + '.' + file.type.split('/')[1]
+          const filePath = `/video/${fileName}`
+
+          const calculator = that.createUploadSpeedCalculator(file.size);
+          // 3. 开始分片上传
+          try {
+            co(function* () {
+
+              var result = yield client.multipartUpload(
+                filePath,
+                file,
+                {
+                  progress: function* (p) {
+                    console.log('进度：', Math.round(p * 100) + '%');
+                    const speeds = calculator(p);
+                    that.speed = that.formatSpeed(speeds);
+                    that.handleProgress(p);
+                    that.progress = Math.round(p * 100);
+                  },
+                  mime: file.type,
+                  parallel: 4,
+                  partSize: 1 * 1024 * 1024,
+                  timeout: 120000,
+                }
+              )
+
+              that.status = 'success'
+              that.$emit('success', `https://im.oytour.com${filePath}`)
+            }).catch(function (error) {
+              console.error('上传失败:', error)
+              that.status = 'error'
+              that.errorMsg = error.message || '未知错误'
+              that.$emit('error', that.errorMsg)
+            });
+          } catch (error) {
+            console.error('上传失败:', error)
+            that.status = 'error'
+            that.errorMsg = error.message || '未知错误'
+            that.$emit('error', that.errorMsg)
+          }
+        }
+      })
+    },
+    handleProgress(p) {
+      console.log(p)
+      const now = Date.now()
+      const loaded = p.loaded
+      const total = p.total
+
+      // 更新进度
+      this.progress = Math.round((loaded / total) * 100)
+
+      // 计算上传速度
+      if (this.lastTime) {
+        const timeDelta = (now - this.lastTime) / 1000 // 转为秒
+        const loadedDelta = loaded - this.lastLoaded
+
+        if (timeDelta > 0) {
+          const currentSpeed = loadedDelta / timeDelta // 字节/秒
+          this.speedSamples.push(currentSpeed)
+          if (this.speedSamples.length > 5) this.speedSamples.shift()
+
+          const avgSpeed = this.speedSamples.reduce((a, b) => a + b, 0) / this.speedSamples.length
+          this.speed = this.formatSpeed(avgSpeed)
+
+          // 计算剩余时间
+          const remainingBytes = total - loaded
+          const remainingTime = remainingBytes / avgSpeed
+          this.timeRemaining = this.formatTime(remainingTime)
+        }
+      }
+
+      // 更新记录
+      this.lastTime = now
+      this.lastLoaded = loaded
+    },
+
+    formatSpeed(bytesPerSecond) {
+      if (bytesPerSecond >= 1024 * 1024) {
+        return `${(bytesPerSecond / (1024 * 1024)).toFixed(1)} MB/s`
+      } else if (bytesPerSecond >= 1024) {
+        return `${(bytesPerSecond / 1024).toFixed(1)} KB/s`
+      }
+      return `${bytesPerSecond.toFixed(0)} B/s`
+    },
+
+    formatTime(seconds) {
+      if (seconds === Infinity || isNaN(seconds)) return '--'
+      const mins = Math.floor(seconds / 60)
+      const secs = Math.floor(seconds % 60)
+      return `${mins > 0 ? mins + '分' : ''}${secs}秒`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ali-oss-uploader {
+  font-family: Arial, sans-serif;
+  max-width: 500px;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #666;
+}
+
+.progress-bar {
+  height: 8px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #409EFF;
+  transition: width 0.3s ease;
+}
+
+.status-message {
+  padding: 10px;
+  text-align: center;
+  font-weight: bold;
+}
+
+.success {
+  color: #67C23A;
+}
+
+.error {
+  color: #F56C6C;
+}
+</style>
\ No newline at end of file

src/plug/index.js

@@ -124,7 +124,7 @@ export default {
         let ocrUrl = "http://192.168.5.46:8888";
         // domainUrl = "http://192.168.5.39:8083";
         // domainUrl = "http://192.168.5.46:8501";
-        domainUrl = "http://192.168.5.204:8030";
+        domainUrl = "http://192.168.5.46";
         // domainUrl = "http://reborn.oytour.com";
         // domainUrl = "http://192.168.5.214";
         let crmLocalFileStreamDownLoadUrl = "";