!5 添加文件上传进度条

Merge pull request !5 from zhengdahan/fronted-end

mayfly_go_web/src/common/Api.ts

@@ -48,8 +48,8 @@ class Api {
      * 操作该权限，即请求对应的url
      * @param {Object} param 请求该权限的参数
      */
-    request(param: any = null): Promise<any> {
-        return request.send(this, param);
+    request(param: any = null, options: any = null): Promise<any> {
+        return request.send(this, param, options);
     }
 
     /**

mayfly_go_web/src/common/request.ts

@@ -99,7 +99,7 @@ service.interceptors.response.use(
  * @param {Object} uri    uri
  * @param {Object} params 参数
  */
-function request(method: string, url: string, params: any, headers: any): Promise<any> {
+function request(method: string, url: string, params: any, headers: any, options: any): Promise<any> {
     if (!url)
         throw new Error('请求url不能为空');
     // 简单判断该url是否是restful风格
@@ -109,6 +109,7 @@ function request(method: string, url: string, params: any, headers: any): Promis
     const query: any = {
         method,
         url: url,
+        ...options
     };
     if (headers) {
         query.headers = headers
@@ -121,7 +122,6 @@ function request(method: string, url: string, params: any, headers: any): Promis
     } else {
         query.params = params;
     }
-
     return service.request(query).then(res => res)
         .catch(e => {
             // 如果返回的code不为成功，则会返回对应的错误msg，则直接统一通知即可
@@ -137,8 +137,8 @@ function request(method: string, url: string, params: any, headers: any): Promis
  * @param api Api实例
  * @param params 请求参数
  */
-function send(api: Api, params: any): Promise<any> {
-    return request(api.method, api.url, params, null);
+function send(api: Api, params: any, options: any): Promise<any> {
+    return request(api.method, api.url, params, null, options);
 }
 
 /**
@@ -147,7 +147,7 @@ function send(api: Api, params: any): Promise<any> {
  * @param params 请求参数
  */
 function sendWithHeaders(api: Api, params: any, headers: any): Promise<any> {
-    return request(api.method, api.url, params, headers);
+    return request(api.method, api.url, params, headers, null);
 }
 
 function getApiUrl(url: string) {

mayfly_go_web/src/views/ops/machine/FileManage.vue

@@ -51,10 +51,17 @@
 
         <el-dialog :title="tree.title" v-model="tree.visible" :close-on-click-modal="false" width="680px">
             <div style="height: 45vh; overflow: auto">
+                <el-progress
+                    v-if="uploadProgressShow"
+                    style="width: 90%; margin-left: 20px"
+                    :text-inside="true"
+                    :stroke-width="20"
+                    :percentage="progressNum"
+                />
                 <el-tree v-if="tree.visible" ref="fileTree" :load="loadNode" :props="props" lazy node-key="id" :expand-on-click-node="true">
                     <template #default="{ node, data }">
                         <span class="custom-tree-node">
-                            <el-dropdown size="small" trigger="contextmenu">
+                            <el-dropdown size="small" @visible-change="getFilePath(data, $event)" trigger="contextmenu">
                                 <span class="el-dropdown-link">
                                     <span v-if="data.type == 'd' && !node.expanded">
                                         <SvgIcon name="folder" />
@@ -84,19 +91,15 @@
                                                 查看
                                             </el-link>
                                         </el-dropdown-item>
-                                        
+
                                         <span v-auth="'machine:file:upload'">
                                             <el-dropdown-item v-if="data.type == 'd'">
                                                 <el-upload
                                                     :before-upload="beforeUpload"
                                                     :on-success="uploadSuccess"
+                                                    action=""
+                                                    :http-request="getUploadFile"
                                                     :headers="{ token }"
-                                                    :data="{
-                                                        fileId: tree.folder.id,
-                                                        path: data.path,
-                                                        machineId: machineId,
-                                                    }"
-                                                    :action="getUploadFile({ path: data.path })"
                                                     :show-file-list="false"
                                                     name="file"
                                                     style="display: inline-block; margin-left: 2px"
@@ -244,6 +247,14 @@ export default defineComponent({
                 children: 'zones',
                 isLeaf: 'leaf',
             },
+            progressNum: 0,
+            uploadProgressShow: false,
+            dataObj: {
+                name: '',
+                path: '',
+                type: '',
+            },
+            file: null as any,
         });
 
         watch(props, (newValue) => {
@@ -458,8 +469,35 @@ export default defineComponent({
             a.click();
         };
 
-        const getUploadFile = () => {
-            return `${config.baseApiUrl}/machines/${props.machineId}/files/${state.tree.folder.id}/upload?token=${token}`;
+        const onUploadProgress = (progressEvent: any) => {
+            state.uploadProgressShow = true;
+            let complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+            state.progressNum = complete;
+        };
+
+        const getUploadFile = (content: any) => {
+            const params = new FormData();
+            params.append('file', content.file);
+            params.append('path', state.dataObj.path);
+            params.append('machineId', props.machineId);
+            params.append('fileId', state.tree.folder.id as any);
+            params.append('token', token);
+            machineApi.uploadFile
+                .request(params, {
+                    url: `${config.baseApiUrl}/machines/${props.machineId}/files/${state.tree.folder.id}/upload?token=${token}`,
+                    headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryF1uyUD0tWdqmJqpl' },
+                    onUploadProgress: onUploadProgress,
+                    baseURL: '',
+                })
+                .then(() => {
+                    ElMessage.success('上传成功');
+                    setTimeout(() => {
+                        state.uploadProgressShow = false;
+                    }, 3000);
+                })
+                .catch(() => {
+                    state.uploadProgressShow = false;
+                });
         };
 
         const uploadSuccess = (res: any) => {
@@ -469,9 +507,14 @@ export default defineComponent({
         };
 
         const beforeUpload = (file: File) => {
-            ElMessage.success(`'${file.name}' 上传中,请关注结果通知`);
+            state.file = file;
+            // ElMessage.success(`'${file.name}' 上传中,请关注结果通知`);
+        };
+        const getFilePath = (data: object, visible: boolean) => {
+            if (visible) {
+                state.dataObj = data as any;
+            }
         };
-
         const dontOperate = (data: any) => {
             const path = data.path;
             const ls = [
@@ -535,6 +578,7 @@ export default defineComponent({
             downloadFile,
             getUploadFile,
             beforeUpload,
+            getFilePath,
             uploadSuccess,
             dontOperate,
             formatFileSize,

mayfly_go_web/src/views/ops/machine/api.ts

@@ -21,7 +21,7 @@ export const machineApi = {
     files: Api.create("/machines/{id}/files", 'get'),
     lsFile: Api.create("/machines/{machineId}/files/{fileId}/read-dir", 'get'),
     rmFile: Api.create("/machines/{machineId}/files/{fileId}/remove", 'delete'),
-    uploadFile: Api.create("/machines/files/upload", 'post'),
+    uploadFile: Api.create("/machines/{machineId}/files/{fileId}/upload?token={token}", 'post'),
     fileContent: Api.create("/machines/{machineId}/files/{fileId}/read", 'get'),
     // 修改文件内容
     updateFileContent: Api.create("/machines/{machineId}/files/{id}/write", 'post'),