小文件上传加进度条

src/util/http_util.js

@@ -140,6 +140,34 @@ let fileUpload = (url, formData, headers = {}) => {
     })
 };
 
+let fileUploadProgress = (url, formData, progressFunction, uploadComplete, uploadFailed) => {
+    let token = sessionStorage.getItem("token");
+    let xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
+    xhr.open("PUT", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
+    xhr.onload = (e) => {
+        var info = xhr.responseText;
+        let result = JSON.parse(info);
+        if (result.code == 9000) {
+            uploadComplete(result.data);
+        } else {
+            uploadFailed(result);
+        }
+    }; //请求完成
+    xhr.onerror = (evt) => {
+        uploadFailed({ message: "错误" });
+    } //请求失败
+    xhr.upload.onprogress = (evt) => {
+        if (evt.lengthComputable) {//
+            progressFunction(Math.round(evt.loaded / evt.total * 100) + "%");
+        }
+    }//【上传进度调用方法实现】
+    xhr.upload.onloadstart = function () {//上传开始执行方法
+        console.log("started");
+    };
+    xhr.setRequestHeader(ACCESS_TOKEN, token);
+    xhr.send(formData); //开始上传，发送form数据
+};
+
 //下载文件 type传文件类型 例如：doc,xls...
 let fileDownload = (url, filename, type, headers = {}) => {
     fetch(url, {
@@ -239,6 +267,19 @@ const startLoading = () => {
     document.querySelector('.el-loading-spinner').appendChild(delBtn);
     delBtn.onclick = endLoading;
 }
+const startLoadingProgress = (text) => {
+    loading = Loading.service({
+        lock: true,
+        text: text,
+        background: 'rgba(0, 0, 0, 0.7)'
+    });
+    //增加关闭按钮
+    const delBtn = document.createElement("button");
+    delBtn.innerHTML = "关闭";
+    document.querySelector('.el-loading-spinner').appendChild(delBtn);
+    delBtn.onclick = endLoading;
+    return loading;
+}
 const endLoading = () => {
     loading.close();
 }
@@ -365,8 +406,8 @@ let arr_sound_format = () => {
     return ["WMA", "MP3"]
 }
 //图片
-let arr_img_format = () =>{
-    return ["JPG", "PNG","JPEG"]
+let arr_img_format = () => {
+    return ["JPG", "PNG", "JPEG"]
 }
 //人物机构字段确认状态后缀名
 let rw_jg_IsConfirm = () => {
@@ -667,7 +708,9 @@ export {
     getTreeData,
     lastIndexOf,
     startLoading,
+    startLoadingProgress,
     endLoading,
+
     getTime_extent,
     download,
     format_file,
@@ -690,5 +733,6 @@ export {
     post_technique,
     post_technique_entity,
     addParamNew,
-    arr_img_format
+    arr_img_format,
+    fileUploadProgress
 }
\ No newline at end of file

src/view/sjgl/wxk_public.vue

@@ -287,8 +287,10 @@ import {
     get,
     post,
     fileUpload_PUT,
+    fileUploadProgress,
     delete_util,
     startLoading,
+    startLoadingProgress,
     endLoading,
     download,
     format_file, //上传的文件格式
@@ -296,7 +298,7 @@ import {
     arr_sound_format, //音频的文件格式
 } from "../../util/http_util";
 import { uuid } from "../../util/data_util";
-import BigfileUpload from "../../components/common/bigfileUpload.vue";
+import BigfileUpload from "../../components/common/bigfile_upload.vue";
 export default {
     data() {
         return {
@@ -754,17 +756,24 @@ export default {
                             fd.append("info", JSON.stringify(fileInfo));
                             fd.append("folder", this.type_folder);
                             fd.append("file", this.form_add.fileList[0].raw);
-                            fileUpload_PUT("api/rest/3z/document/upload", fd).then((data) => {
-                                this.$message({
-                                    type: "success",
-                                    message: "文件上传成功!",
+
+                            let load = startLoadingProgress("0%");
+                            let self = this;
+                            this.centerDialogVisible_add = false;
+                            this.loadingText = "0%";
+                            fileUploadProgress("api/rest/3z/document/upload", fd, res => {
+                                load.text = res;
+                            },
+                                res => {
+                                    endLoading();
+                                    console.log("loaded");
+                                    self.handleCurrentChange_lb(1);
+                                },
+                                err => {
+                                    endLoading();
+                                    console.log("error");
+                                    this.$message.warning(err.message);                                
                                 });
-                                this.centerDialogVisible_add = false;
-                                this.handleCurrentChange_lb(1);
-                            })
-                                .catch((err) => {
-                                    this.$message.warning(err.message);
-                                })
                         }
                     }
                 }