改写 upload http-request

src/api/system-info.js

@@ -1,14 +1,38 @@
 import { httpApp } from "@/plugins/axiosIndex";
 import { object2QueryString } from "@/utils/utils";
 import { pickBy } from "lodash-es";
+import MD5 from "js-md5";
 
-export function uploadFile({ file, md5 }) {
+export async function uploadFile({ file, onProgress }) {
   const form = new FormData();
   form.append("file", file);
+  async function blobToArray(blob) {
+    return new Promise((resolve) => {
+      var reader = new FileReader();
+      reader.addEventListener("loadend", function () {
+        // reader.result contains the contents of blob as a typed array
+        resolve(reader.result);
+      });
+      reader.readAsArrayBuffer(blob);
+    });
+  }
+  const ab = await blobToArray(file);
+  const md5 = MD5(ab);
+
   return httpApp.post(
     "/api/admin/sys/file/upload?" + object2QueryString({ type: "frontend" }),
     form,
-    { headers: { "Content-Type": "multipart/form-data", md5: md5 } }
+    {
+      headers: { "Content-Type": "multipart/form-data", md5: md5 },
+      onUploadProgress: function (progressEvent) {
+        // console.log(progressEvent);
+        let e = {};
+        if (progressEvent.total > 0 && progressEvent.loaded) {
+          e.percent = (progressEvent.loaded / progressEvent.total) * 100;
+        }
+        onProgress(e);
+      },
+    }
   );
 }
 

src/features/system/OrgManagement/OrgManagement.vue

@@ -149,7 +149,7 @@ export default {
       this.$refs.theDialog.openDialog();
     },
     edit(org) {
-      this.selectedOrg = org;
+      this.selectedOrg = { ...org };
       this.$refs.theDialog.openDialog();
     },
     async toggleEnableOrg(org) {

src/features/system/OrgManagement/OrgManagementDialog.vue

@@ -127,8 +127,15 @@ export default {
       immediate: true,
       handler: async function () {
         if (this.isEdit) {
-          const res = await searchOrg(this.org.id);
-          this.form = res.data.data[0];
+          let d_loading;
+          try {
+            d_loading = this.$loading({ target: this.$refs["dialog"].$el });
+            // await new Promise((r) => setTimeout(r, 3000));
+            const res = await searchOrg(this.org.id);
+            this.form = res.data.data[0];
+          } finally {
+            d_loading.close();
+          }
         } else {
           this.form = {
             name: "",

src/features/system/OrgManagement/UploadFile.vue

@@ -4,14 +4,17 @@
     class="upload-demo"
     action="/api/placeholder"
     accept=".jpg,.png"
-    :on-change="handleChange"
     :on-preview="handlePreview"
     :on-remove="handleRemove"
     :file-list="fileList"
-    :before-upload="beforeUpload"
     list-type="picture"
-    :auto-upload="false"
+    :http-request="uploadHttpRequest"
+    :on-success="handleSuccess"
+    :on-error="handleError"
   >
+    <!-- :on-change="handleChange" -->
+    <!-- :before-upload="beforeUpload" -->
+    <!-- :auto-upload="false" -->
     <el-button size="small" type="primary">点击上传</el-button>
     <div slot="tip" class="el-upload__tip">
       只能上传jpg/png文件，且不超过500kb
@@ -20,9 +23,47 @@
 </template>
 
 <script>
-import MD5 from "js-md5";
+// import MD5 from "js-md5";
 import { uploadFile } from "@/api/system-info";
 
+/**
+ *       
+ * const options = {
+        headers: this.headers,
+        withCredentials: this.withCredentials,
+        file: rawFile,
+        data: this.data,
+        filename: this.name,
+        action: this.action,
+        onProgress: e => {
+          this.onProgress(e, rawFile);
+        },
+        onSuccess: res => {
+          this.onSuccess(res, rawFile);
+          delete this.reqs[uid];
+        },
+        onError: err => {
+          this.onError(err, rawFile);
+          delete this.reqs[uid];
+        }
+      };
+ */
+// async function uploadHttpRequest(options) {
+//   console.log(options);
+//   return uploadFile({
+//     file: options.file,
+//     onUploadProgress: options.onProgress,
+//   });
+// .then((res) => {
+//   options.onSuccess(res);
+//   return res;
+// })
+// .catch((reason) => {
+//   debugger;
+//   options.onError(reason);
+// });
+// }
+
 export default {
   props: { value: String },
   data() {
@@ -33,77 +74,100 @@ export default {
           url: this.value || "",
         },
       ],
+      uploadHttpRequest: uploadFile,
     };
   },
   watch: {
     value: {
       immediate: true,
       handler(v) {
-        this.fileList[0].url = v;
+        if (v)
+          this.fileList = [
+            {
+              name: "",
+              url: v,
+            },
+          ];
       },
     },
   },
   methods: {
     handleRemove(file, fileList) {
       console.log(file, fileList);
-      const url = "";
-      this.fileList[0].url = url;
+      const url = null;
+      this.fileList = [];
       this.$emit("input", url);
       this.$emit("change", url);
     },
     handlePreview(file) {
       console.log("preview", file);
     },
-    async handleChange(file) {
-      console.log("change", file);
-      this.fileList = [file];
-      if (!file?.raw) return;
-      file = file.raw;
-      async function blobToArray(blob) {
-        return new Promise((resolve) => {
-          var reader = new FileReader();
-          reader.addEventListener("loadend", function () {
-            // reader.result contains the contents of blob as a typed array
-            resolve(reader.result);
-          });
-          reader.readAsArrayBuffer(blob);
-        });
-      }
-      const ab = await blobToArray(file);
-      const md5 = MD5(ab);
+    // async handleChange(file) {
+    //   console.log("change", file);
+    //   this.fileList = [file];
+    //   if (!file?.raw) return;
+    //   file = file.raw;
+    //   async function blobToArray(blob) {
+    //     return new Promise((resolve) => {
+    //       var reader = new FileReader();
+    //       reader.addEventListener("loadend", function () {
+    //         // reader.result contains the contents of blob as a typed array
+    //         resolve(reader.result);
+    //       });
+    //       reader.readAsArrayBuffer(blob);
+    //     });
+    //   }
+    //   const ab = await blobToArray(file);
+    //   const md5 = MD5(ab);
 
-      const res = await uploadFile({ file, md5 });
-      console.log(res);
-      const url = res.data.data.url;
-      this.fileList[0].url = url;
+    //   const res = await uploadFile({ file, md5 });
+    //   console.log(res);
+    //   const url = res.data.data.url;
+    //   this.fileList[0].url = url;
+    //   this.$emit("input", url);
+    //   this.$emit("change", url);
+    // },
+    handleError() {
+      // console.log(file);
+      const url = null;
+      this.fileList = [];
       this.$emit("input", url);
       this.$emit("change", url);
     },
-    async beforeUpload(file) {
-      console.log(file);
-      async function blobToArray(blob) {
-        return new Promise((resolve) => {
-          var reader = new FileReader();
-          reader.addEventListener("loadend", function () {
-            // reader.result contains the contents of blob as a typed array
-            resolve(reader.result);
-          });
-          reader.readAsArrayBuffer(blob);
-        });
-      }
-      const ab = await blobToArray(file);
-      const md5 = MD5(ab);
-
-      const res = await uploadFile({ file, md5 });
-      console.log(res);
-      const url = res.data.data.url;
-      this.fileList[0].url = url;
-      this.$emit("input", url);
-      this.$emit("change", url);
-      // return Promise.reject("stop upload");
+    handleSuccess(res) {
+      // console.log(res, file);
+      // this.fileList = [];
+      this.$emit("input", res.data.data.url);
+      this.$emit("change", res.data.data.url);
     },
+    // async beforeUpload(file) {
+    //   console.log(file);
+    //   async function blobToArray(blob) {
+    //     return new Promise((resolve) => {
+    //       var reader = new FileReader();
+    //       reader.addEventListener("loadend", function () {
+    //         // reader.result contains the contents of blob as a typed array
+    //         resolve(reader.result);
+    //       });
+    //       reader.readAsArrayBuffer(blob);
+    //     });
+    //   }
+    //   const ab = await blobToArray(file);
+    //   const md5 = MD5(ab);
+    //   const res = await uploadFile({ file, md5 });
+    //   console.log(res);
+    //   const url = res.data.data.url;
+    //   this.fileList[0].url = url;
+    //   this.$emit("input", url);
+    //   this.$emit("change", url);
+    //   return Promise.reject("stop upload");
+    // },
   },
 };
 </script>
 
-<style></style>
+<style scoped>
+.upload-demo >>> .el-upload-list__item {
+  transition: 0s !important;
+}
+</style>