上传组件

src/api/system/file/index.js

@@ -4,40 +4,26 @@ import request from '@/utils/request';
  * 上传文件
  * @param file 文件
  */
-export async function uploadFile(file) {
+export async function uploadFile (data) {
   const formData = new FormData();
-  formData.append('file', file);
-  const res = await request.post('/file/upload', formData);
-  if (res.data.code === 0) {
-    return res.data.data;
-  }
-  return Promise.reject(new Error(res.data.message));
-}
-
-/**
- * 上传 base64 文件
- * @param base64 文件数据
- * @param fileName 文件名称
- */
-export async function uploadBase64File(base64, fileName) {
-  const formData = new FormData();
-  formData.append('base64', base64);
-  if (fileName) {
-    formData.append('fileName', fileName);
-  }
-  const res = await request.post('/file/upload/base64', formData);
-  if (res.data.code === 0 && res.data.data) {
-    return res.data.data;
+  formData.append('multiPartFile', data.multiPartFile);
+  formData.append('module', data.module);
+  const res = await request.post('/main/file/upload', formData);
+  if (res.data.code === '0') {
+    return res.data;
   }
   return Promise.reject(new Error(res.data.message));
 }
 
 /**
- * 分页查询文件上传记录
+ * 获取文件
  */
-export async function pageFiles(params) {
-  const res = await request.get('/file/page', { params });
-  if (res.data.code === 0) {
+export async function getFile (params) {
+  const res = await request.get('/main/file/getFile', {
+    params,
+    headers: { requestType: 'blob' }
+  });
+  if (res.data.code === '0') {
     return res.data.data;
   }
   return Promise.reject(new Error(res.data.message));
@@ -46,22 +32,12 @@ export async function pageFiles(params) {
 /**
  * 删除文件
  */
-export async function removeFile(id) {
-  const res = await request.delete('/file/remove/' + id);
-  if (res.data.code === 0) {
-    return res.data.message;
-  }
-  return Promise.reject(new Error(res.data.message));
-}
-
-/**
- * 批量删除文件
- */
-export async function removeFiles(data) {
-  const res = await request.delete('/file/remove/batch', {
+export async function removeFile (data) {
+  const res = await request.post(
+    `/main/file/delete?fileId=${data.fileId}`,
     data
-  });
-  if (res.data.code === 0) {
+  );
+  if (res.data.code === '0') {
     return res.data.message;
   }
   return Promise.reject(new Error(res.data.message));

src/components/upload/fileUpload.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-upload
+    class="upload-demo"
+    action="#"
+    :http-request="handlRequest"
+    :before-remove="beforeRemove"
+    :on-remove="handleRemove"
+    multiple
+    :before-upload="beforeUpload"
+    :file-list="fileList"
+  >
+    <slot>
+      <el-button size="small" type="primary">点击上传</el-button>
+    </slot>
+  </el-upload>
+</template>
+
+<script>
+  import { uploadFile, removeFile } from '@/api/system/file/index.js';
+  import { getImageUrl, getImagePath } from '@/utils/file';
+  export default {
+    props: {
+      value: {
+        type: Array,
+        default: () => []
+      },
+      // 所属模块
+      module: {
+        type: String,
+        required: true
+      },
+      // 限制数量
+      limit: {
+        type: Number,
+        default: -1
+      },
+      // 限制大小 mb
+      size: {
+        type: Number,
+        default: 10
+      }
+    },
+    computed: {
+      fileList: {
+        set (val) {
+          console.log(val);
+          this.$emit(
+            'input',
+            val.map((item) => ({
+              ...item,
+              url: getImagePath(item.url)
+            }))
+          );
+        },
+        get () {
+          const arr = this.value.map((item) => ({
+            ...item,
+            url: getImageUrl(item.url)
+          }));
+          return arr;
+        }
+      }
+    },
+
+    methods: {
+      beforeRemove (file) {
+        if (file.id) {
+          return removeFile({
+            fileId: file.id
+          }).then(() => {
+            return true;
+          });
+        } else {
+          return true;
+        }
+      },
+      handleRemove (file, fileList) {
+        this.fileList = fileList;
+      },
+      beforeUpload (file) {
+        if (file.size / 1024 / 1024 > this.size) {
+          this.$message.error(`大小不能超过 ${this.size}MB`);
+          return false;
+        }
+
+        if (this.limit > 0 && this.fileList.length === this.limit) {
+          this.$message.error(`最多上传 ${this.limit}个文件`);
+          return false;
+        }
+        return uploadFile({
+          module: this.module,
+          multiPartFile: file
+        }).then((res) => {
+          if (res.data) {
+            this.$emit('input', [
+              ...this.value,
+              { ...file, url: res.data.storePath, ...res.data }
+            ]);
+          }
+          return res.data;
+        });
+      },
+      handlRequest () {
+        return Promise.resolve();
+      }
+    }
+  };
+</script>

src/components/upload/imgUpload.vue

@@ -0,0 +1,101 @@
+<template>
+  <ele-image-upload
+    v-model="images"
+    :limit="limit"
+    :drag="true"
+    :multiple="true"
+    :upload-handler="uploadHandler"
+    @upload="onUpload"
+  >
+  </ele-image-upload>
+</template>
+
+<script>
+  import EleImageUpload from 'ele-admin/es/ele-image-upload';
+  import { getImageUrl, getImagePath } from '@/utils/file';
+  import { uploadFile } from '@/api/system/file/index';
+
+  export default {
+    components: { EleImageUpload },
+    props: {
+      // 所属模块
+      module: {
+        type: String,
+        required: true
+      },
+      // 限制数量
+      limit: {
+        type: Number,
+        default: -1
+      },
+      value: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {};
+    },
+    computed: {
+      images: {
+        set (val) {
+          this.$emit(
+            'input',
+            val.map((item) => ({
+              ...item,
+              url: getImagePath(item.url)
+            }))
+          );
+        },
+        get () {
+          const arr = this.value.map((item) => ({
+            ...item,
+            url: getImageUrl(item.url)
+          }));
+
+          return arr;
+        }
+      }
+    },
+    methods: {
+      /* 上传事件 */
+      uploadHandler (file) {
+        const item = {
+          file,
+          uid: file.uid,
+          name: file.name,
+          progress: 0,
+          status: null
+        };
+        if (!file.type.startsWith('image')) {
+          this.$message.error('只能选择图片');
+          return;
+        }
+        if (file.size / 1024 / 1024 > 2) {
+          this.$message.error('大小不能超过 2MB');
+          return;
+        }
+        this.$emit('input', [...this.value, item]);
+        this.onUpload(item);
+      },
+      /* 上传 item */
+      async onUpload (item) {
+        // 模拟上传
+        item.status = 'uploading';
+        item.progress = 20;
+
+        const res = await uploadFile({
+          module: this.module,
+          multiPartFile: item.file
+        });
+        if (res.data) {
+          item.url = res.data.storePath;
+          item.id = res.data.id;
+
+          item.progress === 100;
+          item.status = 'done';
+        }
+      }
+    }
+  };
+</script>

src/store/modules/user.js

@@ -105,8 +105,8 @@ export default {
     //动态路由
     async fetchUserInfo ({ commit }) {
       const result = await getResourcesTree().catch(() => {});
-      const list = result.filter((i) => i.path === '/page-main-data');
-      if (!list.length) {
+      const list = result?.filter((i) => i.path === '/page-main-data');
+      if (!list?.length) {
         return {};
       }
 

src/utils/file.js

@@ -0,0 +1,32 @@
+import { getToken } from './token-util';
+import { TOKEN_HEADER_NAME } from '@/config/setting';
+
+// 获取图片反显url
+export function getImageUrl (path) {
+  if (process.env.NODE_ENV === 'development') {
+    return `http://192.168.3.51:18086/main/file/getFile?${TOKEN_HEADER_NAME}=${getToken()}&objectName=${path}`;
+  } else {
+    return `/main/file/getFile?${TOKEN_HEADER_NAME}=${getToken()}&objectName=${path}`;
+  }
+}
+// 从反显url上获取接口需要path
+export function getImagePath (url) {
+  if (!url) {
+    return '';
+  }
+
+  const match = url.match(/&objectName=([\S\s]*)/);
+
+  return (match && match[1].split('&')[0]) || '';
+}
+
+// 下载方法
+export function download (data, name) {
+  const a = document.createElement('a');
+  const url = window.URL.createObjectURL(new Blob([data]));
+  const filename = name;
+  a.href = url;
+  a.download = filename;
+  a.click();
+  window.URL.revokeObjectURL(url);
+}

src/views/test/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <fileUpload v-model="imgList" module="file" :limit="2"></fileUpload>
+    {{ imgList }}
+  </div>
+</template>
+<script>
+  import fileUpload from '@/components/upload/fileUpload';
+  export default {
+    components: { fileUpload },
+    data () {
+      return {
+        imgList: []
+      };
+    }
+  };
+</script>

vue.config.js

@@ -31,11 +31,11 @@ module.exports = {
     proxy: {
       // 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
       '/api': {
-        // target: 'http://192.168.3.51:18086', // 测试
+        target: 'http://192.168.3.51:18086', // 测试
         // target: 'http://192.168.3.35:8080', // kang杨威
         // target: 'http://192.168.3.25:8080', // 黄峥嵘
         // target: 'http://192.168.3.41:8080', // 何江鹏
-        target: 'http://192.168.3.33:8080', // 谢一平
+        // target: 'http://192.168.3.33:8080', // 谢一平
         // target: 'http://192.168.3.64:8080', // 粟勋
 
         changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域