添加图片预览。PSD、MAP、TIF、TIFF，限制上传文件大小，修改上传文件类型

index.html

@@ -22,4 +22,5 @@
     }
 </script>
 <script src="static/js/protocolcheck.js"></script>
+<script src="static/js/tiff.min.js"></script>
 </html>
\ No newline at end of file

package-lock.json

@@ -6471,6 +6471,11 @@
         "find-up": "^4.0.0"
       }
     },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w=="
+    },
     "point-in-polygon": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
@@ -6608,6 +6613,14 @@
         }
       }
     },
+    "psd.js": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmmirror.com/psd.js/-/psd.js-3.9.0.tgz",
+      "integrity": "sha512-gTNUszC/hjS+F3O0JkdWOdN7dVZzOaYfyF7X1VD0UOue5iWOaFzfxFbfZgYnXtYS1pze9V10Hd/K0pWY3My54g==",
+      "requires": {
+        "pngjs": "^3.4.0"
+      }
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",

package.json

@@ -55,6 +55,7 @@
     "leader-line": "^1.0.7",
     "object-assign": "^4.1.1",
     "ol": "^6.5.0",
+    "psd.js": "^3.9.0",
     "push.js": "^1.0.12",
     "quill": "^1.3.7",
     "relation-graph": "^1.1.0",

src/components/common/bigfile_upload.vue

@@ -38,6 +38,7 @@ import $ from "jquery";
 import WebUploader from "webuploader";
 import "webuploader/dist/webuploader.css";
 import { ACCESS_TOKEN, ACCESS_USER, HTTP_STATUS } from "../../constant/user";
+import { format_file} from '../../util/http_util'
 export default {
   props: {
     addFileInfo: {
@@ -63,7 +64,9 @@ export default {
         children: 'children',
         label: 'label'
       },
-      fl_type:0
+      fl_type:0,
+      size:0,
+      maxSize:3*1024*1024*1024,//3个G
     };
   },
   mounted() {
@@ -181,11 +184,16 @@ export default {
         },
       }
     );
+    
+    //获取指定的文件格式
+    let fileTypes = format_file()+"";
+    let fileTypesArr = fileTypes.split(',');
+    let fileType = fileTypesArr.map(item=> item.slice(1));
     //创建实例
     var uploader = WebUploader.create({
       accept: {
-        extensions: "pdf,doc,ppt,pptx,xls,xlsx,docx,txt,flv,mp4,avi,mvb,rmvb,rm,gif,jepg,bmp,tif,jpg,png,mp3",
-        mimeTypes: ".pdf,.doc,.ppt,.pptx,.xls,.xlsx,.docx,.txt,.flv,.mp4,.avi,.mvb,.rmvb,.rm,.gif,.jepg,.bmp,.tif,.jpg,.png,.mp3"
+        extensions: fileType.join(','),
+        mimeTypes: fileTypes
       },
       pick: {
         id: '#picker',
@@ -201,8 +209,8 @@ export default {
       // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
       disableGlobalDnd: true,
       fileNumLimit: 1024,
-      fileSizeLimit: 50 * 1024 * 1024 * 1024,//50G 验证文件总大小是否超出限制, 超出则不允许加入队列
-      fileSingleSizeLimit: 10 * 1024 * 1024 * 1024 //10G 验证单个文件大小是否超出限制, 超出则不允许加入队列
+      fileSizeLimit: 3 * 1024 * 1024 * 1024,//3G 验证文件总大小是否超出限制, 超出则不允许加入队列
+      fileSingleSizeLimit: 3 * 1024 * 1024 * 1024 //3G 验证单个文件大小是否超出限制, 超出则不允许加入队列
     });
     /**
      * 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
@@ -216,8 +224,16 @@ export default {
       $.extend(headers, _self.headers);
     };
     // 当有文件被添加进队列的时候触发
-    uploader.on("fileQueued", function (file) {
-      _self.fileList.push({ name: file.name, id: file.id, percentage: 0, state: 0 });
+    uploader.on("fileQueued", function (file,fileList) {
+      _self.size = _self.size + file.size;
+      if(_self.size>_self.maxSize){
+        _self.$message({
+            type: "warning",
+            message: "总文件只能小于3G!",
+        });
+        return 
+      }
+      _self.fileList.push({ name: file.name, id: file.id, percentage: 0, state: 0 ,file:file});
     });
     //单个文件开始上传
     uploader.on("uploadStart", (file) => {
@@ -263,6 +279,7 @@ export default {
   methods: {
     removeFileAll(){
       this.fileList = [];
+      this.size = 0;
     },
     upload() {
       if(this.fileList.length==0){
@@ -287,10 +304,14 @@ export default {
       }
       this.uploader.removeFile(item.id);
       this.fileList.splice(index, 1);
+      this.size = this.size - item.file.size;
     },
     retry(item, index) {
       item.description = "";
-      this.uploader.retry(this.fileList.filter(e => e.id == item.id)[0].id);
+      let file = this.filelist.filter(e =>e.id == item.id)[0];
+      file.pass = false;
+      this.uploader.retry(file.id);
+      // this.uploader.retry(this.fileList.filter(e => e.id == item.id)[0].id);
     },
     getProgressBar(file, percentage) {
       let item = this.fileList.find(e => e.id == file.id);

src/util/http_util.js

@@ -402,19 +402,19 @@ let imageToBase64 = (file, that) => {
 
 //文件上传限制格式
 let format_file = () => {
-    return ".TXT,.DOC,.XLS,.PPT,.DOCX,.XLSX,.PPTX,.pdf,.JPG,.PNG,.JPEG,.TIFF,.SWF,.rar,.zip,.EXE,.FLV,.RMVB,.rm,.MP4,.MVB,.avi,.WMA,.MP3"
+    return ".TXT,.DOC,.DOCX,.PDF,.PPT,.PPTX,.RIF,.XML,.HTML,.PSD,.JPEG,.JPG,.PNG,.BMP,.TIF,.TIFF,.MP4,.MOV,.AVI,.MTS,.WMV,.FLV,.MPEG,.MKV,.M4V,.MPG,.MP3,.WAV,.AIFF,.AIF,.WMA"
 }
 //视频播放格式
 let arr_video_format = () => {
-    return ["FLV", "RMVB", "MP4", "MVB", "avi", "rm"]
+    return ["MP4","MOV", "AVI", "MTS", "WMV", "FLV", "MPEG", "MKV", "M4V", "MPG"]
 }
 //音频播放格式
 let arr_sound_format = () => {
-    return ["WMA", "MP3"]
+    return ["MP3", "WAV", "AIFF", "AIF", "WMA"]
 }
 //图片
 let arr_img_format = () => {
-    return ["JPG", "PNG", "JPEG"]
+    return ["PSD", "JPEG", "JPG", "PNG", "BMP", "TIF","TIFF"]
 }
 //人物机构字段确认状态后缀名
 let rw_jg_IsConfirm = () => {

src/view/flfg/znfx.vue

@@ -361,6 +361,13 @@
     <el-dialog :title="title_sound" :visible.sync="centerDialogVisible_sound" center width="500px" :destroyOnClose="true">
       <audio controls id="sound_id" :src="sound_src" controlslist="nodownload" class="audio-class"></audio>
     </el-dialog>
+    <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
+        :destroyOnClose="true">
+        <div style="text-align: center;" v-loading="loadings">
+            <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]">
+            </el-image>
+        </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -383,7 +390,8 @@ import { uuid } from "../../util/data_util";
 import VanillaTilt from "vanilla-tilt";
 import "animate.css";
 import { queryDoc, searchFiles } from '../../api/zfclk/wxgl';
-import VideoPlayer from "../../components/common/video_player.vue"
+import VideoPlayer from "../../components/common/video_player.vue";
+import PSD from 'psd.js';
 export default {
   data() {
     return {
@@ -392,11 +400,15 @@ export default {
       centerDialogVisible_edit: false,
       centerDialogVisible_video: false,
       centerDialogVisible_sound: false,
+      centerDialogVisible_img: false,
+      loadings: false,
       title: "", //视频播放页面的titile
       title_sound: "", //音频播放页面的titile
       title_txt: "",
       video_src: "",
       sound_src: "",
+      img_src: "",
+      title_img: "",
       sc_time: "", //上传时间参数
       wd_name: "", //文档名称
       wd_classify: "", //文档类别
@@ -454,6 +466,18 @@ export default {
     },
   },
   methods: {
+    loadTiff(url) {
+        let _this = this;
+        var xhr = new XMLHttpRequest();
+        xhr.responseType = 'arraybuffer';
+        xhr.open('GET', url);
+        xhr.onload = function (e) {
+            var tiff = new Tiff({buffer: xhr.response});
+            _this.loadings = false;
+            _this.img_src = tiff.toDataURL();
+        };
+        xhr.send();
+    },
     //列表动画效果结束让全文动画开始
     afterLeave_lb(el) {
       let _this = this;
@@ -520,11 +544,26 @@ export default {
                   img_type = true;
                 }
               });
-              if (video_type) {
-                item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName=' + item.file.uuid + '&' + new Date().getTime();
-              }
+              // if (video_type) {
+              //   item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName=' + item.file.uuid + '&' + new Date().getTime();
+              // }
               if (img_type) {
-                item.imgUrl = 'api/rest/file/viewPicture/Document?objectName=' + item.file.uuid + '&' + new Date().getTime();
+                if (item.file.type.toUpperCase() == 'BMP' || item.file.type.toUpperCase() == "JPEG" || item.file.type.toUpperCase() == "JPG" || item.file.type.toUpperCase() == "PNG") {
+                  item.imgUrl = 'api/rest/file/viewPicture/Document?objectName=' + item.file.uuid + '&' + new Date().getTime();
+                }else if(item.file.type.toUpperCase() == 'PSD'){
+                  PSD.fromURL(item.imgUrl).then(function (psd) {
+                    item.imgUrl  = psd.image.toPng().src;
+                  });
+                }else if(item.file.type.toUpperCase() == 'TIF'||item.file.type.toUpperCase() == 'TIFF'){
+                  var xhr = new XMLHttpRequest();
+                  xhr.responseType = 'arraybuffer';
+                  xhr.open('GET', item.imgUrl);
+                  xhr.onload = function (e) {
+                      var tiff = new Tiff({buffer: xhr.response});
+                      item.imgUrl = tiff.toDataURL();
+                  };
+                  xhr.send();
+                }
               }
             })
             _this.tableData = data.list;
@@ -591,6 +630,8 @@ export default {
       let video_type = false;
       //用户判断此格式是否是音频格式
       let sound_type = false;
+      //用户判断此格式是否是图片
+      let img_type = false;
       arr_video_format().forEach((name) => {
         if (name.toUpperCase() == row.file.type.toUpperCase()) {
           video_type = true;
@@ -601,6 +642,11 @@ export default {
           sound_type = true;
         }
       });
+      arr_img_format().forEach((name) => {
+          if (name.toUpperCase() == row.file.type.toUpperCase()) {
+              img_type = true;
+          }
+      });
       if (video_type) {
         _this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
         _this.title = "正在播放视频---" + row.name;
@@ -623,6 +669,30 @@ export default {
           if (document.getElementById("sound_id").currentTime != 0)
             document.getElementById("sound_id").currentTime = 0;
         }, 500);
+      } else if (img_type) {
+        _this.loadings = true;
+        _this.title_img = "正在预览图片---" + row.name;
+        _this.centerDialogVisible_img = true;
+        setTimeout(function () {
+            let path_srt = "api/rest/file/download/Document/";
+            path_srt = path_srt + row.file.uuid;
+            if (row.file.type.toUpperCase() == 'BMP') {
+                _this.convertBMPtoPNG(path_srt, function (pngImage) {
+                    _this.img_src = pngImage;
+                    _this.loadings = false;
+                });
+            } else if (row.file.type.toUpperCase() == 'PSD') {
+                PSD.fromURL(path_srt).then(function (psd) {
+                    _this.img_src = psd.image.toPng().src;
+                    _this.loadings = false;
+                });
+            } else if(row.file.type.toUpperCase() == 'TIF'||row.file.type.toUpperCase() == 'TIFF') {
+                _this.loadTiff(path_srt);
+            }else{
+                _this.img_src = path_srt;
+                _this.loadings = false;
+            }
+        }, 500);
       } else {
 
         get(`api/rest/file/exists?bucket=DocumentPDF&filename=${row.file.uuid}`).then(res => {
@@ -893,6 +963,31 @@ export default {
       this.searchs(1);
       this.wjfx_qh = true;
     },
+    convertBMPtoPNG(bmpImage, callback) {
+        // 创建一个新的 Image 对象
+        const img = new Image();
+        img.onload = function () {
+            // 创建一个 Canvas 元素
+            const canvas = document.createElement('canvas');
+            canvas.width = img.width;
+            canvas.height = img.height;
+
+            // 获取 CanvasRenderingContext2D 对象
+            const ctx = canvas.getContext('2d');
+
+            // 将 BMP 图片绘制到 Canvas 上
+            ctx.drawImage(img, 0, 0);
+
+            // 将 Canvas 的内容转换为 PNG 格式的 DataURL
+            const pngImage = canvas.toDataURL('image/png');
+
+            // 调用回调函数并传递转换后的 PNG 图片
+            callback(pngImage);
+        };
+
+        // 设置 BMP 图片源
+        img.src = bmpImage;
+    }
   },
   mounted() {
     let _this = this;
@@ -944,6 +1039,12 @@ export default {
         document.getElementById("sound_id").pause();
       }
     },
+    //图片弹框预览
+    centerDialogVisible_img: function (s) {
+        if (!s) {
+            this.img_src = "";
+        }
+    },
     clientDetails: function (val) {
       this.clientDetails_type = val.type;
       this.wjfx_qh = true;

src/view/flfg/znfxZfcl.vue

@@ -361,6 +361,13 @@
     <el-dialog :title="title_sound" :visible.sync="centerDialogVisible_sound" center width="500px" :destroyOnClose="true">
       <audio controls id="sound_id" :src="sound_src" controlslist="nodownload" class="audio-class"></audio>
     </el-dialog>
+    <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
+        :destroyOnClose="true">
+        <div style="text-align: center;" v-loading="loadings">
+            <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]">
+            </el-image>
+        </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -383,7 +390,8 @@ import { uuid } from "../../util/data_util";
 import VanillaTilt from "vanilla-tilt";
 import "animate.css";
 import { queryDoc, searchFiles } from '../../api/zfclk/wxgl';
-import VideoPlayer from "../../components/common/video_player.vue"
+import VideoPlayer from "../../components/common/video_player.vue";
+import PSD from 'psd.js';
 export default {
   data() {
     return {
@@ -392,11 +400,15 @@ export default {
       centerDialogVisible_edit: false,
       centerDialogVisible_video: false,
       centerDialogVisible_sound: false,
+      centerDialogVisible_img: false,
+      loadings: false,
       title: "", //视频播放页面的titile
       title_sound: "", //音频播放页面的titile
       title_txt: "",
       video_src: "",
       sound_src: "",
+      img_src: "",
+      title_img: "",
       sc_time: "", //上传时间参数
       wd_name: "", //文档名称
       wd_classify: "", //文档类别
@@ -454,6 +466,18 @@ export default {
     },
   },
   methods: {
+    loadTiff(url) {
+        let _this = this;
+        var xhr = new XMLHttpRequest();
+        xhr.responseType = 'arraybuffer';
+        xhr.open('GET', url);
+        xhr.onload = function (e) {
+            var tiff = new Tiff({buffer: xhr.response});
+            _this.loadings = false;
+            _this.img_src = tiff.toDataURL();
+        };
+        xhr.send();
+    },
     //列表动画效果结束让全文动画开始
     afterLeave_lb(el) {
       let _this = this;
@@ -520,11 +544,26 @@ export default {
                   img_type = true;
                 }
               });
-              if (video_type) {
-                item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName=' + item.file.uuid + '&' + new Date().getTime();
-              }
+              // if (video_type) {
+              //   item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName=' + item.file.uuid + '&' + new Date().getTime();
+              // }
               if (img_type) {
-                item.imgUrl = 'api/rest/file/viewPicture/Document?objectName=' + item.file.uuid + '&' + new Date().getTime();
+                if (item.file.type.toUpperCase() == 'BMP' || item.file.type.toUpperCase() == "JPEG" || item.file.type.toUpperCase() == "JPG" || item.file.type.toUpperCase() == "PNG") {
+                  item.imgUrl = 'api/rest/file/viewPicture/Document?objectName=' + item.file.uuid + '&' + new Date().getTime();
+                }else if(item.file.type.toUpperCase() == 'PSD'){
+                  PSD.fromURL(item.imgUrl).then(function (psd) {
+                    item.imgUrl  = psd.image.toPng().src;
+                  });
+                }else if(item.file.type.toUpperCase() == 'TIF'||item.file.type.toUpperCase() == 'TIFF'){
+                  var xhr = new XMLHttpRequest();
+                  xhr.responseType = 'arraybuffer';
+                  xhr.open('GET', item.imgUrl);
+                  xhr.onload = function (e) {
+                      var tiff = new Tiff({buffer: xhr.response});
+                      item.imgUrl = tiff.toDataURL();
+                  };
+                  xhr.send();
+                }
               }
             })
             _this.tableData = data.list;
@@ -591,6 +630,8 @@ export default {
       let video_type = false;
       //用户判断此格式是否是音频格式
       let sound_type = false;
+      //用户判断此格式是否是图片
+      let img_type = false;
       arr_video_format().forEach((name) => {
         if (name.toUpperCase() == row.file.type.toUpperCase()) {
           video_type = true;
@@ -601,6 +642,11 @@ export default {
           sound_type = true;
         }
       });
+      arr_img_format().forEach((name) => {
+          if (name.toUpperCase() == row.file.type.toUpperCase()) {
+              img_type = true;
+          }
+      });
       if (video_type) {
         _this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
         _this.title = "正在播放视频---" + row.name;
@@ -623,6 +669,30 @@ export default {
           if (document.getElementById("sound_id").currentTime != 0)
             document.getElementById("sound_id").currentTime = 0;
         }, 500);
+      } else if (img_type) {
+        _this.loadings = true;
+        _this.title_img = "正在预览图片---" + row.name;
+        _this.centerDialogVisible_img = true;
+        setTimeout(function () {
+            let path_srt = "api/rest/file/download/Document/";
+            path_srt = path_srt + row.file.uuid;
+            if (row.file.type.toUpperCase() == 'BMP') {
+                _this.convertBMPtoPNG(path_srt, function (pngImage) {
+                    _this.img_src = pngImage;
+                    _this.loadings = false;
+                });
+            } else if (row.file.type.toUpperCase() == 'PSD') {
+                PSD.fromURL(path_srt).then(function (psd) {
+                    _this.img_src = psd.image.toPng().src;
+                    _this.loadings = false;
+                });
+            } else if(row.file.type.toUpperCase() == 'TIF'||row.file.type.toUpperCase() == 'TIFF') {
+                _this.loadTiff(path_srt);
+            }else{
+                _this.img_src = path_srt;
+                _this.loadings = false;
+            }
+        }, 500);
       } else {
 
         get(`api/rest/file/exists?bucket=DocumentPDF&filename=${row.file.uuid}`).then(res => {
@@ -944,6 +1014,12 @@ export default {
         document.getElementById("sound_id").pause();
       }
     },
+    //图片弹框预览
+    centerDialogVisible_img: function (s) {
+        if (!s) {
+            this.img_src = "";
+        }
+    },
     clientDetails: function (val) {
       this.clientDetails_type = val.type;
       this.wjfx_qh = true;