完成自定义文件组件，统一使用axios发起请求，使用方法：必须指定content-type为multipart/form-data

plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/web/FileSystemElContorller.java

 package com.ibeetl.admin.core.web;
 
-import cn.hutool.core.util.IdUtil;
 import cn.hutool.core.util.StrUtil;
 import com.ibeetl.admin.core.entity.CoreOrg;
 import com.ibeetl.admin.core.entity.CoreUser;
@@ -14,6 +13,7 @@ import java.io.OutputStream;
 import java.net.URLEncoder;
 import java.util.List;
 import javax.servlet.http.HttpServletResponse;
+import javax.validation.constraints.NotBlank;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
@@ -52,14 +52,14 @@ public class FileSystemElContorller {
   @PostMapping("/uploadAttachment")
   @ResponseBody
   public JsonResult<String> uploadFile(
-      @RequestParam("file") MultipartFile file, String fileBatchId, String bizType, String bizId)
+      @RequestParam("file") MultipartFile file,
+      @NotBlank String fileBatchId,
+      String bizType,
+      String bizId)
       throws IOException {
     if (file.isEmpty()) {
       return JsonResult.fail();
     }
-    if (StrUtil.isBlank(fileBatchId)) {
-      fileBatchId = IdUtil.fastUUID();
-    }
     CoreUser user = platformService.getCurrentUser();
     CoreOrg org = platformService.getCurrentOrg();
     FileItem fileItem =
@@ -78,7 +78,7 @@ public class FileSystemElContorller {
 
   @PostMapping("/deleteAttachment")
   @ResponseBody
-  public JsonResult deleteFile(Long fileId, String batchFileUUID) throws IOException {
+  public JsonResult deleteFile(Long fileId, String batchFileUUID) {
     fileService.removeFile(fileId, batchFileUUID);
     return JsonResult.success();
   }

ve-admin/admin-web/package.json

@@ -63,10 +63,12 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "qs": "^6.9.1",
     "screenfull": "4.2.0",
     "showdown": "^1.9.1",
     "sortablejs": "1.8.4",
     "tui-editor": "1.3.3",
+    "uuid": "^7.0.2",
     "vue": "2.6.11",
     "vue-count-to": "1.0.13",
     "vue-router": "3.1.6",

ve-admin/admin-web/src/api/file.js

 /*
  * @Author: 一日看尽长安花
  * @since: 2020-03-16 11:16:52
- * @LastEditTime: 2020-03-16 13:13:31
+ * @LastEditTime: 2020-03-19 21:04:54
  * @LastEditors: 一日看尽长安花
  * @Description:
  */

ve-admin/admin-web/src/components/GeneralPage/components/DetailPage.vue

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 16:14:37
- * @LastEditTime: 2020-03-17 15:46:23
+ * @LastEditTime: 2020-03-23 14:24:32
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -22,7 +22,7 @@
   >
     <div class="dialog-container">
       <el-form
-        ref="editForm"
+        ref="editFormGP"
         :rules="rules"
         :model="dialogData"
         label-position="right"
@@ -132,7 +132,7 @@ export default {
       return equalsIgnoreCase(str1, type);
     },
     createData() {
-      this.$refs['editForm'].validate(valid => {
+      this.$refs['editFormGP'].validate(valid => {
         if (valid) {
           this.$emit('create-data', this.dialogData);
           this.$emit('update:dialogVisible', false);
@@ -147,7 +147,7 @@ export default {
       });
     },
     updateData() {
-      this.$refs['editForm'].validate(valid => {
+      this.$refs['editFormGP'].validate(valid => {
         if (valid) {
           this.$emit('update-data', this.dialogData);
           this.$emit('update:dialogVisible', false);

ve-admin/admin-web/src/components/Upload/FileUpload.vue

 <!--
  * @Author: 一日看尽长安花
  * @since: 2020-03-08 11:03:14
- * @LastEditTime: 2020-03-17 20:54:30
+ * @LastEditTime: 2020-03-23 21:36:23
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -27,11 +27,11 @@
     :list-type="listType"
     :auto-upload="autoUpload"
     :file-list="fileList_d"
-    :http-request="updateFiles"
+    :http-request="httpRequest"
     :disabled="disabled"
     :limit="limit"
     :on-exceed="onExceed"
-    action="/core/file/uploadAttachment"
+    :action="action"
   >
     <template v-slot:default>
       <slot name="default"> </slot>
@@ -45,6 +45,8 @@
   </el-upload>
 </template>
 <script>
+import { v4 as uuidv4 } from 'uuid';
+import request from '@/utils/request';
 import { getFileList } from '@/api/file';
 
 export default {
@@ -63,6 +65,10 @@ export default {
       type: String,
       default: null
     },
+    action: {
+      type: String,
+      default: '/core/file/uploadAttachment'
+    },
     headers: {
       type: Object,
       default() {
@@ -164,7 +170,8 @@ export default {
   },
   data() {
     return {
-      fileList_d: this.fileList
+      fileList_d: this.fileList,
+      fileBatchId_d: this.fileBatchId
     };
   },
   watch: {
@@ -179,18 +186,43 @@ export default {
   },
   methods: {
     loadFilelItems() {
-      if (!this.fileBatchId || this.fileBatchId.trim().length <= 0) {
+      if (!this.fileBatchId_d || this.fileBatchId_d.trim().length <= 0) {
         this.fileList_d = [];
+        this.fileBatchId_d = uuidv4();
         return;
       }
-      getFileList({ fileBatchId: this.fileBatchId }).then(res => {
+      getFileList({ fileBatchId: this.fileBatchId_d }).then(res => {
         const { code, data } = { ...res };
         this.fileList_d = data || [];
       });
     },
-    updateFiles(params) {
-      debugger;
-      console.log(params);
+    httpRequest(uploadComponentParams) {
+      const options = uploadComponentParams;
+      let formData = new FormData();
+      if (options.data) {
+        Object.keys(options.data).forEach(key => {
+          formData.append(key, options.data[key]);
+        });
+      }
+      formData.append(options.filename, options.file, options.file.name);
+      formData.set('file-batch-id', this.fileBatchId_d);
+      formData.set('biz-id', this.data.bizId);
+      formData.set('biz-type', this.data.bizType);
+      formData.append('file-type', options.file.type);
+      return request({
+        url: options.action,
+        method: 'post',
+        timeout: undefined,
+        headers: {
+          'Content-Type': 'multipart/form-data;charset=utf-8'
+        },
+        data: formData,
+        onUploadProgress: progressEvent => {
+          const complete =
+            ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+          options.onProgress({ percent: complete });
+        }
+      }).then(options.onSuccess, options.onError);
     }
   }
 };

ve-admin/admin-web/src/main.js

 /*
  * @Author: 一日看尽长安花
  * @since: 2019-09-04 20:55:14
- * @LastEditTime: 2020-03-11 16:00:50
+ * @LastEditTime: 2020-03-23 13:56:54
  * @LastEditors: 一日看尽长安花
  * @Description:
  */

ve-admin/admin-web/src/utils/request.js

@@ -2,15 +2,32 @@
  * @Description: In User Settings Edit
  * @Author: your name
  * @Date: 2019-09-09 12:16:28
- * @LastEditTime: 2020-03-08 15:59:43
+ * @LastEditTime: 2020-03-22 15:18:48
  * @LastEditors: 一日看尽长安花
  */
 import axios from 'axios';
+import lodash from 'lodash';
 import { MessageBox, Message } from 'element-ui';
 import store from '@/store';
 import { getToken, setToken } from '@/utils/auth';
 import { toCamelCaseDeep } from '@/utils/object-util';
 
+const defaultTransformRequest = axios.defaults.transformRequest[0];
+
+axios.defaults.transformRequest = [
+  function(data, config) {
+    if (
+      config['Content-Type'] &&
+      lodash.startsWith(
+        config['Content-Type'].toLowerCase(),
+        'multipart/form-data'
+      )
+    )
+      return data;
+    return defaultTransformRequest(data, config);
+  }
+];
+
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
@@ -25,7 +42,10 @@ service.interceptors.request.use(
     /**get方法为params，post、put、delete为data */
     const params = config.params || config.data || null;
     /**下划线转为驼峰 */
-    if (params) {
+    if (
+      params &&
+      Object.prototype.toString.call(params) !== '[object FormData]'
+    ) {
       const sourceParams = Object.assign({}, params);
       const changedKeyParams = Object.assign(
         {},
@@ -37,9 +57,34 @@ service.interceptors.request.use(
       } else {
         config.data = changedKeyParams;
       }
+    } else if (
+      params &&
+      Object.prototype.toString.call(params) === '[object FormData]'
+    ) {
+      /**文件上传时使用formdata对象 */
+      const keys = [];
+      for (const k of params.keys()) {
+        keys.push(k);
+      }
+      for (const i in keys) {
+        const key = keys[i];
+        /*todo 可能的问题：参数未对数组做处理 */
+        const val = params.get(key);
+        if (!val || val === 'null' || val === 'undefined') {
+          params.delete(key);
+          continue;
+        }
+        if (Object.prototype.toString.call(val) === '[object File]') {
+          /**这里应该在补充一个blob对象的判断 */
+          params.set(lodash.camelCase(key), val, val.name);
+        } else {
+          params.set(lodash.camelCase(key), val);
+        }
+      }
+      config.data = params;
     }
-    // do something before request is sent
     if (store.getters.token) {
+      // do something before request is sent
       // let each request carry token
       // ['Authorization'] see to MDN explain about "HTTP Authorization"
       // please modify it according to the actual situation

ve-admin/admin-web/src/views/users/index.vue

 <!--
  * @Author: 一日看尽长安花
  * @since: 2019-10-12 15:43:18
- * @LastEditTime: 2020-03-17 18:11:53
+ * @LastEditTime: 2020-03-23 14:27:26
  * @LastEditors: 一日看尽长安花
  * @Description:
  -->
@@ -377,11 +377,14 @@ export default {
         });
     },
     submitUpload() {
-      debugger;
       this.$refs.fileUpload.$refs.upload.submit();
     },
     onUploadSuccess(response, file, fileList) {
-      debugger;
+      const { code, message, data } = { ...response };
+      if (data) {
+        this.$children[0].$refs.detailPageGP.$props.dialogData.attachment_id =
+          response.data;
+      }
     }
   }
 };