|
@@ -29,6 +29,15 @@
|
|
|
格式的文件,单个文件大小不能超过10M
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ v-if="batchDown"
|
|
|
+ class="batchdown-btn"
|
|
|
+ size="small"
|
|
|
+ type="default"
|
|
|
+ @click="_handleDownClick"
|
|
|
+ >批量下载</el-button>
|
|
|
+ </div>
|
|
|
<el-upload
|
|
|
action="#"
|
|
|
list-type="picture-card"
|
|
@@ -44,7 +53,7 @@
|
|
|
</template>
|
|
|
<template v-slot:file="{ file }">
|
|
|
<div class="thumbnail-group">
|
|
|
- <el-image v-if='getFileClass(file)=="ext png"||getFileClass(file)=="ext jpg"||getFileClass(file)=="ext jpeg"||getFileClass(file)=="ext JPG"'
|
|
|
+ <el-image v-if='getFileClass(file)=="ext png"||getFileClass(file)=="ext jpg"||getFileClass(file)=="ext jpeg"||getFileClass(file)=="ext JPG"||getFileClass(file)=="ext PNG"'
|
|
|
:src='file.url'
|
|
|
class="el-upload-list__item-thumbnail"
|
|
|
:class="getFileClass(file)"
|
|
@@ -123,6 +132,8 @@ import downloadNow from '../WsDownload/download'
|
|
|
import { EventBus } from 'base-core-lib'
|
|
|
import pdf from '@/components/pdf/pdf'
|
|
|
import { mapActions } from 'vuex'
|
|
|
+import JSZip from 'jszip';
|
|
|
+import FileSaver from 'file-saver';
|
|
|
export default {
|
|
|
name: 'WsUpload',
|
|
|
components: {
|
|
@@ -191,6 +202,11 @@ export default {
|
|
|
type: String,
|
|
|
required: false,
|
|
|
},
|
|
|
+ batchDown: {
|
|
|
+ // 要保存的表的名字
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ },
|
|
|
onlineEdit: false,
|
|
|
disabled: false,
|
|
|
buttonName: {
|
|
@@ -316,7 +332,55 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ _handleDownClick(){
|
|
|
+ console.log(this.fileList,111)
|
|
|
+ var arr=[]
|
|
|
+ for (let i = 0; i < this.fileList.length; i++) {
|
|
|
+ arr.push(this.fileList[i].url+'?s=' + Math.random().toString())
|
|
|
+ }
|
|
|
+ let urls = arr
|
|
|
+ let promises = [];
|
|
|
+ urls.map((item) => {
|
|
|
+ promises.push(this.getBase64Image(item));
|
|
|
+ });
|
|
|
+
|
|
|
+ Promise.all(promises)
|
|
|
+ .then((result) => {
|
|
|
+ let zip = new JSZip();// 创建压缩包
|
|
|
+ let img = zip.folder("image"); // 创建文件夹
|
|
|
+ let number = 0;
|
|
|
+ result.map((p) => {
|
|
|
+ let i = number++;
|
|
|
+ img.file(`${i}.png`, p, {
|
|
|
+ base64: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ zip.generateAsync({ type: "blob" }).then(function (content) {
|
|
|
+ // see FileSaver.js
|
|
|
+ FileSaver.saveAs(content, "image.zip");
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {});
|
|
|
+ },
|
|
|
+ getBase64Image(src) {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ var canvas = document.createElement("canvas"),
|
|
|
+ ctx = canvas.getContext("2d"),
|
|
|
+ img = new Image();
|
|
|
+ img.crossOrigin = "Access-Control-Allow-Origin";
|
|
|
+ img.onload = function () {
|
|
|
+ canvas.height = img.height;
|
|
|
+ canvas.width = img.width;
|
|
|
+ ctx.drawImage(img, 0, 0);
|
|
|
+ var dataURL = canvas.toDataURL("image/png");
|
|
|
+ let deleDataHeader = dataURL.split(",")[1];
|
|
|
+ resolve(deleDataHeader);
|
|
|
+ canvas = null;
|
|
|
+ };
|
|
|
+ //这个很重要
|
|
|
+ img.src =src;
|
|
|
+ });
|
|
|
+ },
|
|
|
// 处理上传按钮点击
|
|
|
_handleUploadClick() {
|
|
|
this.$refs.triggerDiv.click()
|
|
@@ -793,4 +857,7 @@ $ctrl-margin-left: 10px;
|
|
|
.operate-bg:hover {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
+.batchdown-btn{
|
|
|
+ margin-bottom:10px;
|
|
|
+}
|
|
|
</style>
|