Browse Source

1、public/systemConfig.js中新增img-service服务配置
2、fileController中新增获取图片预览地址、获取文件下载地址的接口
3、修改axiosUtils中的文件上传

niuheng 2 years ago
parent
commit
dd6c7bc7d5
3 changed files with 70 additions and 40 deletions
  1. 2 0
      public/systemConf.js
  2. 25 0
      src/controller/fileController.ts
  3. 43 40
      src/utils/http/basic/axiosUtils.ts

+ 2 - 0
public/systemConf.js

@@ -11,6 +11,8 @@ var __systemConf = {
   admServiceUrl: 'http://develop.ysbdtp.com/adm-server',
   //文件服务域名
   fileServiceUrl: 'http://develop.ysbdtp.com/dmp-file',
+  //img-service域名
+  imgServiceUrl: 'http://develop.ysbdtp.com/image-service',
   // 地图key
   mapKey: 'd42beb96e0e4fb0d49482975abeae1b7',
   //登录相关配置

+ 25 - 0
src/controller/fileController.ts

@@ -1,4 +1,5 @@
 import { fileHttpUtils } from "../utils/http/fileHttpUtils";
+import { toolUtils } from "@/utils/toolUtils";
 
 export default class FileController {
   static http = new fileHttpUtils();
@@ -23,4 +24,28 @@ export default class FileController {
   static async uploadFiles(params) {
     return await this.http.uploadFiles(params);
   }
+
+  /**
+   * 根据文件ID获取图片的预览地址
+   * @param fileId 文件ID
+   */
+  static getImgViewUrl(fileId: string) { 
+    var viewUrl = toolUtils.getBaseHttpUrl((window as any).__systemConf.imgServiceUrl, '/common/image_get');
+    return viewUrl + '?systemId=dev&key=' + fileId;
+  };
+
+  /**
+   * 根据文件ID获取文件(包括图片)的下载地址
+   * @param _paramobj 格式如下:
+   *  {
+   *    fileId:'文件ID',
+   *    userId:'用户ID,不传时将取vuex中的user.id',
+   *    groupCode:'集团编码,不传时将取vuex中的selectProject.groupCode',
+   *    projectId:'项目ID,不传时将取vuex中的selectProject.id',
+   *    appId:'应用ID,暂时没用',
+   *  }
+   */
+  static async getFileDownUrl(_paramobj: any) { 
+    return await this.http.postRequest('file/initFileDownload', _paramobj);
+  };
 }

+ 43 - 40
src/utils/http/basic/axiosUtils.ts

@@ -120,7 +120,7 @@ export class axiosUtils {
       if (urlParamStr.indexOf("groupCode=") == -1) {
         urlParamStr =
           "groupCode=" +
-        (data.groupCode || vueStore.state.selectProject.groupCode) +
+          (data.groupCode || vueStore.state.selectProject.groupCode) +
           "&" +
           urlParamStr;
       }
@@ -128,7 +128,7 @@ export class axiosUtils {
       if (urlParamStr.indexOf("userId=") == -1) {
         urlParamStr =
           "userId=" +
-        (data.userId || vueStore.state.user.id) +
+          (data.userId || vueStore.state.user.id) +
           "&" +
           urlParamStr;
       }
@@ -178,11 +178,6 @@ export class axiosUtils {
     let userId = _paramobj.userId || vueStore.state.user.id;
     let fileServiceUrl = _paramobj.fileServiceUrl;
     let files = _paramobj.files;
-    console.log(
-      "%c [ files ]: ",
-      "color: #bf2c9f; background: pink; font-size: 13px;",
-      files
-    );
     try {
       let waitFiles = files instanceof Array == true ? files : [files];
       //上传成功的文件数量
@@ -190,11 +185,6 @@ export class axiosUtils {
 
       for (let i = 0; i < waitFiles.length; i++) {
         let _currFileObj = waitFiles[i];
-        console.log(
-          "%c [ _currFileObj ]: ",
-          "color: #bf2c9f; background: pink; font-size: 13px;",
-          _currFileObj
-        );
         //获取文件md5
         let fileContentMd5 = await getFileContentMd5(_currFileObj);
         //获取文件上传地址
@@ -220,7 +210,7 @@ export class axiosUtils {
                 //开始上传
                 await upload(
                   uploadUrl,
-                  _currFileObj.file,
+                  _currFileObj,
                   function (progressObj) {
                     if (typeof _paramobj.uploadProgressCall == "function") {
                       let uploadedFileSize =
@@ -249,9 +239,9 @@ export class axiosUtils {
               logicConfig.resultObj.failure,
               null,
               "获取文件" +
-                _currFileObj.fileName +
-                "的上传地址时出错:" +
-                getUploadResult.message
+              _currFileObj.fileName +
+              "的上传地址时出错:" +
+              getUploadResult.message
             );
         }
         if (uploadedCount == waitFiles.length)
@@ -282,16 +272,19 @@ export class axiosUtils {
         let fileReader = new FileReader();
         fileReader.onload = function (e) {
           spark.append(e.target.result); // Append array buffer
-          currentChunk++;
-          if (currentChunk < chunks) {
-            loadNext();
-          } else {
-            let fileContentMd5 = spark.end();
-            console.info("computed hash", fileContentMd5); // Compute hash
-            //文件md5获取完成后,调用后台接口获取上传地址
-            // let getUploadResult = await getUploadUrl(fileContentMd5, _fileObj.fileName, file.size);
-            resolve(fileContentMd5);
-          }
+          // currentChunk++;
+          // if (currentChunk < chunks) {
+          //   loadNext();
+          // } else {
+          //   let fileContentMd5 = spark.end();
+          //   console.info("computed hash", fileContentMd5); // Compute hash
+          //   //文件md5获取完成后,调用后台接口获取上传地址
+          //   // let getUploadResult = await getUploadUrl(fileContentMd5, _fileObj.fileName, file.size);
+          //   resolve(fileContentMd5);
+          // }
+          let fileContentMd5 = spark.end();
+          console.info("computed hash", fileContentMd5); // Compute hash
+          resolve(fileContentMd5);
         };
 
         fileReader.onerror = function (e) {
@@ -305,7 +298,8 @@ export class axiosUtils {
             end =
               start + chunkSize >= file.size ? file.size : start + chunkSize;
 
-          fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+          // fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+          fileReader.readAsArrayBuffer(file);
         }
 
         loadNext();
@@ -342,20 +336,29 @@ export class axiosUtils {
     }
 
     //上传
-    async function upload(uploadUrl, file, uploadProgressCall) {
+    async function upload(uploadUrl, _fileObj, uploadProgressCall) {
       return new Promise((resolve, reject) => {
-        var formData = new FormData();
-        formData.append("file", file);
-        axios
-          .put(uploadUrl, formData, {
-            onUploadProgress: uploadProgressCall,
-          })
-          .then(function (res) {
-            resolve(res);
-          })
-          .catch(function (error) {
-            reject(error);
-          });
+        let file = _fileObj.file;
+        let fileReader = new FileReader();
+        fileReader.onload = function (e) {
+          axios
+            .put(uploadUrl, e.target.result, {
+              onUploadProgress: uploadProgressCall,
+            })
+            .then(function (res) {
+              resolve(res);
+            })
+            .catch(function (error) {
+              reject(error);
+            });
+        };
+
+        fileReader.onerror = function (e) {
+          let errStr = "文件:" + _fileObj.fileName + "读取错误:";
+          reject(errStr);
+        };
+
+        fileReader.readAsArrayBuffer(file);
       });
     }
   }