上传文件百分比进度条展示功能

src/api/sys/OSSService.js

@@ -45,7 +45,7 @@ export const client = new OSS({
   region: 'oss-cn-hangzhou', // oss地址
   accessKeyId: 'LTAI5tQDWoM9c1WyJNPs86rX', // 通过阿里云控制台创建的AccessKey ID。
   accessKeySecret: '84dDIx4edT1n78KUOqqSmDZ35pchJv', // 通过阿里云控制台创建的AccessKey Secret。
-  bucket: 'xg-pg', // 仓库名字
+  bucket: 'xgxm-test', // 仓库名字
   useFetch: true, // 支持上传大于100KB的文件
   secure: false // 返回的url为https
 })
@@ -143,16 +143,20 @@ export async function httpRequest (file, name, type) { // 阿里云OSS上传
   console.log(filePath, '文件存储路径')
   const fileName = filePath + name + '.' + exname
   console.log(fileName, '文件名')
-  await client.put(
-    fileName,
-    file.file,
-    {
-      headers
+
+  client.multipartUpload(fileName, file.file, {
+    progress: function (p, checkpoint) {
+      file.onProgress({percent: Math.floor(p * 100)}) // 触发el-upload组件的onProgress方法
+    }
+    // mime: type,
+  }).then(function (result) {
+    console.log(result)
+    if (result.res.status === 200) {
+      // file.onSuccess(result) // 触发el-upload组件的onSuccess方法
+      file.file.url = fileName
     }
-  ).then(res => {
-    console.log(res, 'res---header ')
-    file.file.url = fileName
-  }).catch(err => {
-    console.log(err, 'err')
+  }).catch(function (err) {
+    console.log(err)
+    file.onError('上传失败') // 触发el-upload组件的onError方法，此方法会移除文件列表
   })
 }

src/views/modules/sys/project/AssessForm.vue

@@ -336,10 +336,13 @@
                      :on-remove="handleRemove"
                      :show-file-list="false"
                      :on-change="changes"
+                     :on-progress="uploadVideoProcess"
                      :file-list="filesArra2">
             <el-button type="info" size="mini" v-if="inputForm.permissionFlag&&showVi">点击上传</el-button>
           </el-upload>
           <div style="height: calc(100% - 80px);margin-top: 10px">
+            <!-- 进度条 -->
+            <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
           <vxe-table
             style="margin-left: 5em"
             border="inner"
@@ -469,7 +472,9 @@
         url: '',
         rowurl: '',
         src: '',
-        showVi: true
+        showVi: true,
+        loadProgress: 0, // 动态显示进度条
+        progressFlag: false // 关闭进度条
       }
     },
     components: {
@@ -483,6 +488,14 @@
       this.projectService = new ProjectService()
     },
     methods: {
+      uploadVideoProcess (event, file, fileList) {
+        this.progressFlag = true // 显示进度条
+        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+        if (this.loadProgress >= 100) {
+          this.loadProgress = 100
+          setTimeout(() => { this.progressFlag = false }, 1000) // 一秒后关闭进度条
+        }
+      },
       // async getsrc (row) {
       //   if (row.id === null || row.id === undefined || row.id === '') {
       //     await this.ossService.getTemporaryUrl(row.raw.url).then((data) => {

src/views/modules/sys/project/ConsultationForm.vue

@@ -339,10 +339,13 @@
                    :on-remove="handleRemove"
                    :show-file-list="false"
                    :on-change="changes"
+                   :on-progress="uploadVideoProcess"
                    :file-list="filesArra2">
           <el-button type="info" size="mini" v-if="inputForm.permissionFlag&&showVi" >点击上传</el-button>
         </el-upload>
         <div style="height: calc(100% - 80px);margin-top: 10px">
+          <!-- 进度条 -->
+          <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
           <vxe-table
             style="margin-left: 5em"
             border="inner"
@@ -472,7 +475,9 @@
         url: '',
         rowurl: '',
         src: '',
-        showVi: true
+        showVi: true,
+        loadProgress: 0, // 动态显示进度条
+        progressFlag: false // 关闭进度条
       }
     },
     components: {
@@ -487,6 +492,14 @@
     },
     methods: {
 
+      uploadVideoProcess (event, file, fileList) {
+        this.progressFlag = true // 显示进度条
+        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+        if (this.loadProgress >= 100) {
+          this.loadProgress = 100
+          setTimeout(() => { this.progressFlag = false }, 1000) // 一秒后关闭进度条
+        }
+      },
       async toHref (row) {
         const link = document.createElement('a')
         if (row.id === null || row.id === undefined || row.id === '') {

src/views/modules/sys/user/UserInfo.vue

@@ -72,7 +72,7 @@
         </el-form-item>
       </el-form>
     </el-tab-pane>
-    <el-tab-pane label="我的日志">
+    <el-tab-pane label="我的日志" v-if="this.generalForm.admin">
         <el-menu  default-active="1" mode="horizontal" @select="changeLog">
           <el-menu-item index="1">
             <i class="el-icon-setting"></i>
@@ -153,7 +153,8 @@
           officeDTO: {
             name: ''
           },
-          remarks: ''
+          remarks: '',
+          admin: ''
         },
         concatForm: {
           id: '',
@@ -197,7 +198,7 @@
             this.refreshList()
           }
         },
-  
+
         immediate: true,
         deep: false
       }