视频上传进度条

src/views/weibao/api/index.js

@@ -122,12 +122,19 @@ export function pageAppProject(data) {
     })
 }
 // 上传图片
-export function uploadImage(data) {
+export function uploadImage(data, callback) {
     return request({
         url: '/pmadmin/app/image/uploadImage',
         method: 'post',
         data,
-        type: 'formData'
+        type: 'formData',
+        onUploadProgress: function (progressEvent) { //原生获取上传进度的事件
+            if (progressEvent.lengthComputable) {
+                //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
+                //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
+                callback(progressEvent);
+            }
+        }
     })
 }
 // 创建服务项目

src/views/weibao/components/vanUploader.vue

@@ -42,6 +42,7 @@ export default {
       multiMediaUrl: [],
       imgUrl: [],
       fileList: [],
+      progress: '',
     }
   },
   watch: {
@@ -131,7 +132,12 @@ export default {
     },
     async uploading(formDate, file) {
       console.log(formDate, 'formDate')
-      var res = await uploadImage(formDate)
+      var res = await uploadImage(formDate, function (e) {
+        console.log(e)
+        var progress = Math.floor((e.loaded / e.total) * 100) + '%'
+        file.message = '上传中' + progress
+      })
+      console.log(res, 'res')
       if (res.code == '0000') {
         file.status = 'success'
         file.message = '成功'