新增上传文件页面的内容[左侧菜单没有批量上传的按钮]

src/api/index.js

@@ -34,6 +34,10 @@ const subList = [
   {
     name: "API_LIST_COUNT",
     url: "VUE_APP_BASE_API"
+  },
+  {
+    name: "API_LIST_FILE",
+    url: "VUE_APP_BASE_API"
   }
 ];
 

src/api/modules/file.js

@@ -1,6 +1,6 @@
 export default {
-    API_LIST_File: {
-      // 查询所有试题类型-父类
-      INTERFACE_POST_IMAGE_UPLOAD: "/image/upload",
+    API_LIST_FILE: {
+      // 上传文件
+      INTERFACE_POST_IMAGE_UPLOAD: "admin/questions/upload",
     }
   };

src/views/examQuestionManagement/examQuestionBatchImport.vue

@@ -4,9 +4,12 @@
       <div class="common-card">
         <a-upload
           name="file"
-          accept=".pdf"
+          :show-upload-list="false"
+          accept=".pdf,.jpg,.png,.jpeg"
           :headers="headers"
-          @change="handleChange"
+          multiple
+          :before-upload="beforeUpload"
+          @change="uploadFileFun"
         >
           <a-button> <a-icon type="upload" /> Click to Upload </a-button>
         </a-upload>
@@ -43,18 +46,50 @@ export default {
   methods: {
     //初始化数据
     initDataFun() {},
-    handleChange(info) {
-      if (info.file.status !== 'uploading') {
-        console.log(info.file, info.fileList);
+    // 上传前
+    beforeUpload(file) {
+      let isJpgOrPng =
+        file.type === 'application/pdf' ||
+        file.type === 'image/jpeg' ||
+        file.type === 'image/png' ||
+        file.type === 'image/jpg';
+      if (!isJpgOrPng) {
+        this.$message.error('上传图片只能是 JPG，JPEG，PNG 格式！');
       }
-      if (info.file.status === 'done') {
-        this.$message.success(`${info.file.name} file uploaded successfully`);
-      } else if (info.file.status === 'error') {
-        this.$message.error(`${info.file.name} file upload failed.`);
+      let isLtHalf1M = file.size / 1024 / 1024 < 0.5;
+      if (!isLtHalf1M) {
+        this.$message.error('Image must smaller than 0.5MB!');
       }
+      let bySelf = false;
+      return isJpgOrPng && isLtHalf1M && bySelf;
     },
-    uploadFileFun(e, v, m) {
-      console.log(e, v, m);
+    // 上传文件
+    uploadFileFun(data) {
+      this.loading = true;
+      console.log(data);
+      const formData = new FormData();
+      formData.append('file', data.file);
+      this.$_http
+        .post(this.$_API.INTERFACE_POST_IMAGE_UPLOAD, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        })
+        .then((res) => {
+          console.log(res);
+          // if (info.file.status !== 'uploading') {
+          //   // console.log(info);
+          // }
+          // if (info.file.status === 'done') {
+          //   this.$message.success('上传文件成功');
+          // } else if (info.file.status === 'error') {
+          //   this.$message.error('上传文件失败');
+          // }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
   },
 };