Skip to content

X
xxx_phase2_web
Commit 8d1f37eb authored by 高飞's avatar 高飞
Browse files
Options

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

parent 7e70ee05
Expand all Show whitespace changes
Inline Side-by-side
Showing with 3868 additions and 262 deletions
index.html
View file @ 8d1f37eb
......@@ -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
View file @ 8d1f37eb
......@@ -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",
......
src/components/common/bigfile_upload.vue
View file @ 8d1f37eb
......@@ -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
View file @ 8d1f37eb
......@@ -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
View file @ 8d1f37eb
......@@ -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) {
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
View file @ 8d1f37eb
......@@ -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) {
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;
......
src/view/fzjc/znfx.vue
View file @ 8d1f37eb
This diff is collapsed.
src/view/sjgl/wxk_public.vue
View file @ 8d1f37eb
This diff is collapsed.
static/js/tiff.min.js 0 → 100644
View file @ 8d1f37eb
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment