2 Commits 19f3d2abc4 ... 08c50a3234

Author SHA1 Message Date
  duxiangyu 08c50a3234 项目信息管理 图片上传 2 years ago
  niuheng dd6c7bc7d5 1、public/systemConfig.js中新增img-service服务配置 2 years ago

+ 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',
   //登录相关配置

+ 1 - 0
src/components/project-manage/form/form.vue

@@ -9,6 +9,7 @@
       :selectData="formItemObj.dataSource"
       :formItemObj="formItemObj"
       :info="info"
+      :defaultFileList="trueValue()"
       @change="change"
     />
   </div>

+ 42 - 10
src/components/project-manage/form/items/ImageUpload.vue

@@ -183,6 +183,7 @@ export default {
     hosts: {
       type: String,
       required: false,
+      default: "",
     },
     /**
      * 可上传的文件数
@@ -233,6 +234,24 @@ export default {
       type: Boolean,
       default: true,
     },
+    initValue: {
+      type: [String, Number, Array, Object],
+      default: () => {
+        return [];
+      },
+    },
+    formItemObj: {
+      type: Object,
+      default: () => {
+        return { isMultiple: false };
+      },
+    },
+    info: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
   computed: {
     // 限制上传
@@ -267,12 +286,17 @@ export default {
     },
   },
   mounted() {
-    const templateList = JSON.parse(JSON.stringify(this.defaultFileList)),
-      flag = !this.previewMode
-        ? this.defaultFileList.length > this.limitMaxNumber
-        : false;
-    if (flag) templateList.splice(this.limitMaxNumber, templateList.length - 1);
-    this.renderImageList = templateList;
+    if (!Array.isArray(this.defaultFileList)) {
+      this.renderImageList = [];
+    } else {
+      const templateList = JSON.parse(JSON.stringify(this.defaultFileList)),
+        flag = !this.previewMode
+          ? this.defaultFileList.length > this.limitMaxNumber
+          : false;
+      if (flag)
+        templateList.splice(this.limitMaxNumber, templateList.length - 1);
+      this.renderImageList = templateList;
+    }
   },
   methods: {
     // 图片缩放
@@ -490,6 +514,7 @@ export default {
      * 上传文
      */
     async featchUpload(fileItem) {
+      console.log(this.renderImageList, " 22");
       const _currentIndex = this.renderImageList.findIndex(
         (item) => item.name === fileItem.name
       );
@@ -519,11 +544,17 @@ export default {
         uploadProgressCall: function (_obj) {
           console.log("uploadProgressCall", _obj);
         },
-        oneUploadedCall: function (_obj) {
+        oneUploadedCall: async (_obj) => {
           console.log("oneUploadedCall", _obj);
-          const _data =
-            typeof response === "string" ? JSON.parse(response) : response;
-          //         _this.handleData(fileItem, _data, 'done');
+          const viewUrl = await FileController.getImgViewUrl(_obj.fileId);
+          console.log(viewUrl);
+          const _data = {
+            url: viewUrl,
+            fileId: _obj.fileId,
+          };
+          // const _data =
+          //   typeof response === "string" ? JSON.parse(response) : response;
+          _this.handleData(fileItem, _data, "done");
         },
         files: [
           {
@@ -586,6 +617,7 @@ export default {
             suffix: fileItem.type, // 文件格式
             progressRate: 100, // 上传进度
             size: fileItem.size,
+            fileId: response.fileId,
           };
           _this.renderImageList.splice(_currentIndex, 1, templateFile);
         } else {

+ 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);
       });
     }
   }