Skip to content

R
rongtong-app
Commit 54956921 authored by kaitly205422@163.com's avatar kaitly205422@163.com
Browse files
Options

图片压缩功能开发

parent e5ee5271
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 29 deletions
package-lock.json
View file @ 54956921
...@@ -7689,6 +7689,11 @@ ...@@ -7689,6 +7689,11 @@
"integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=", "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
"dev": true "dev": true
}, },
"image-conversion": {
"version": "2.1.1",
"resolved": "https://registry.npmmirror.com/image-conversion/-/image-conversion-2.1.1.tgz",
"integrity": "sha512-hnMOmP7q2jxA+52FZ+wHNhg3fdFRlgfngsQH2JQHEQkafY7tj/8F15e6Rv/RxDegc872jvyaRHwMbkTZK1Cjbg=="
},
"image-size": { "image-size": {
"version": "0.5.5", "version": "0.5.5",
"resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz?cache=0&sync_timestamp=1569840905026&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fimage-size%2Fdownload%2Fimage-size-0.5.5.tgz", "resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz?cache=0&sync_timestamp=1569840905026&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fimage-size%2Fdownload%2Fimage-size-0.5.5.tgz",
......
src/views/riskProject/add/addCurrent.vue
View file @ 54956921
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
<van-field name="hdPicture1" label="风险图片"> <van-field name="hdPicture1" label="风险图片">
<template #input> <template #input>
<van-uploader @delete="deleteFile(...arguments, 'pictureFile')" multiple :max-count="5" <van-uploader @delete="deleteFile(...arguments, 'pictureFile')" multiple :max-count="5"
upload-text="最多上传五个" v-model="uploaderImg"> upload-text="最多上传五个" v-model="uploaderImg" :after-read="afterRead">
<template slot="default"> <template slot="default">
<!-- 11111111111 --> <!-- 11111111111 -->
<div style=" <div style="
...@@ -116,8 +116,8 @@ ...@@ -116,8 +116,8 @@
</van-field> </van-field>
<van-field name="measuresProjectFile[]" label="技术措施附件"> <van-field name="measuresProjectFile[]" label="技术措施附件">
<template #input> <template #input>
<van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="measuresProjectFile" accept="file" <van-uploader multiple :max-count="5" upload-text="最多上传五个" :after-read="afterRead"
@delete="deleteFile(...arguments, 'measuresProjectFile')"> v-model="measuresProjectFile" accept="file" @delete="deleteFile(...arguments, 'measuresProjectFile')">
<template slot="default"> <template slot="default">
<div style=" <div style="
width: 2.13333rem; width: 2.13333rem;
...@@ -143,8 +143,9 @@ ...@@ -143,8 +143,9 @@
</van-field> </van-field>
<van-field name="measuresAdministrationFile[]" label="管理措施附件"> <van-field name="measuresAdministrationFile[]" label="管理措施附件">
<template #input> <template #input>
<van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="measuresAdministrationFile" <van-uploader multiple :max-count="5" upload-text="最多上传五个" :after-read="afterRead"
accept="file" @delete="deleteFile(...arguments, 'measuresAdministrationFile')"> v-model="measuresAdministrationFile" accept="file"
@delete="deleteFile(...arguments, 'measuresAdministrationFile')">
<template slot="default"> <template slot="default">
<div style=" <div style="
width: 2.13333rem; width: 2.13333rem;
...@@ -170,7 +171,8 @@ ...@@ -170,7 +171,8 @@
</van-field> </van-field>
<van-field name="measuresEmergencyFile[]" label="应急措施附件"> <van-field name="measuresEmergencyFile[]" label="应急措施附件">
<template #input> <template #input>
<van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="measuresEmergencyFile" accept="file" <van-uploader multiple :max-count="5" upload-text="最多上传五个" :after-read="afterRead"
v-model="measuresEmergencyFile" accept="file"
@delete="deleteFile(...arguments, 'measuresEmergencyFile')"> @delete="deleteFile(...arguments, 'measuresEmergencyFile')">
<template slot="default"> <template slot="default">
<!-- 11111111111 --> <!-- 11111111111 -->
...@@ -472,7 +474,7 @@ import { getUserInfo, getLocalUserInfo } from "@/utils/userInfo"; ...@@ -472,7 +474,7 @@ import { getUserInfo, getLocalUserInfo } from "@/utils/userInfo";
import { getFun, postFun } from "@/service/table.js"; import { getFun, postFun } from "@/service/table.js";
import { timestampToTime, generateId } from "@/utils/format"; import { timestampToTime, generateId } from "@/utils/format";
import addFloor from "./addFloor"; import addFloor from "./addFloor";
import { compress } from 'image-conversion';
export default { export default {
name: "addCurrent", name: "addCurrent",
components: { components: {
...@@ -615,6 +617,14 @@ export default { ...@@ -615,6 +617,14 @@ export default {
// } // }
}, },
methods: { methods: {
compressFile(file) {
if (file) {
return compress(file, 0.2).catch(error => {
this.$toast.fail("图片压缩失败");
return Promise.resolve(file);
})
}
},
createFloor() { createFloor() {
this.isFloor = true; this.isFloor = true;
}, },
...@@ -687,9 +697,6 @@ export default { ...@@ -687,9 +697,6 @@ export default {
// on cancel // on cancel
}); });
}, },
afterRead(file) {
console.log(file);
},
timestampToTimes(time) { timestampToTimes(time) {
return timestampToTime(new Date(time), "DT2", true); return timestampToTime(new Date(time), "DT2", true);
}, },
...@@ -1000,38 +1007,58 @@ export default { ...@@ -1000,38 +1007,58 @@ export default {
}); });
return formData; return formData;
}, },
async afterRead(e) {
if (Array.isArray(e)) {
e.forEach(async i => {
const res = await this.compressFile(i.file);
let file = new window.File([res], i.file.name);
i.compressFile = file;
})
} else {
const res = await this.compressFile(e.file);
let file = new window.File([res], e.file.name);
e.compressFile = file;
}
},
onSubmit(values, event) { onSubmit(values, event) {
if (values == "save") { if (values == "save") {
event.preventDefault(); event.preventDefault();
} }
// console.log('%c [ values ]-592', 'font-size:13px; background:pink; color:#bf2c9f;', values) // console.log('%c [ values ]-592', 'font-size:13px; background:pink; color:#bf2c9f;', values)
var formDataJson = this.jsonToFormData(this.form); var formDataJson = this.jsonToFormData(this.form);
if (formDataJson.get("pictureFile")) { formDataJson.delete("pictureFile") }
if (formDataJson.get("measuresProjectFile")) { formDataJson.delete("measuresProjectFile") }
if (formDataJson.get("measuresEmergencyFile")) { formDataJson.delete("measuresEmergencyFile") }
if (formDataJson.get("measuresAdministrationFile")) { formDataJson.delete("measuresAdministrationFile") }
let url = "/risk/plan/inherent"; let url = "/risk/plan/inherent";
this.loadingStatus = true; this.loadingStatus = true;
this.uploaderImg.forEach((item) => { this.uploaderImg.forEach(async (item) => {
if (item.file) { if (item.file) {
formDataJson.append("pictureFile[]", item.file); formDataJson.append('pictureFile[]', item.compressFile);
} else { } else {
formDataJson.append("pictureFile[]", item.fileId); formDataJson.append("pictureFile[]", item.fileId);
} }
}); });
this.measuresAdministrationFile.forEach((item) => { this.measuresAdministrationFile.forEach((item) => {
if (item.file) { if (item.file) {
formDataJson.append("measuresProjectFile[]", item.file); // formDataJson.append("measuresProjectFile[]", item.file);
formDataJson.append('measuresProjectFile[]', item.compressFile);
} else { } else {
formDataJson.append("measuresProjectFile[]", item.fileId); formDataJson.append("measuresProjectFile[]", item.fileId);
} }
}); });
this.measuresEmergencyFile.forEach((item) => { this.measuresEmergencyFile.forEach((item) => {
if (item.file) { if (item.file) {
formDataJson.append("measuresEmergencyFile[]", item.file); // formDataJson.append("measuresEmergencyFile[]", item.file);
formDataJson.append('measuresEmergencyFile[]', item.compressFile);
} else { } else {
formDataJson.append("measuresEmergencyFile[]", item.fileId); formDataJson.append("measuresEmergencyFile[]", item.fileId);
} }
}); });
this.measuresAdministrationFile.forEach((item) => { this.measuresAdministrationFile.forEach((item) => {
if (item.file) { if (item.file) {
formDataJson.append("measuresAdministrationFile[]", item.file); // formDataJson.append("measuresAdministrationFile[]", item.file);
formDataJson.append('measuresAdministrationFile[]', item.compressFile);
} else { } else {
formDataJson.append("measuresAdministrationFile[]", item.fileId); formDataJson.append("measuresAdministrationFile[]", item.fileId);
} }
......
src/views/riskProject/add/addInherent.vue
View file @ 54956921
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
<template #input> <template #input>
<van-uploader @delete="deleteFile(...arguments, 'pictureFile')" multiple :max-count="5" upload-text="最多上传五个" <van-uploader @delete="deleteFile(...arguments, 'pictureFile')" multiple :max-count="5" upload-text="最多上传五个"
v-model="uploaderImg"> v-model="uploaderImg" :after-read="afterRead">
<template slot="default"> <template slot="default">
<div style=" <div style="
width: 2.13333rem; width: 2.13333rem;
...@@ -116,8 +116,8 @@ ...@@ -116,8 +116,8 @@
<van-field name="measuresProjectFile[]" label="技术措施附件"> <van-field name="measuresProjectFile[]" label="技术措施附件">
<template #input> <template #input>
<van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="measuresProjectFile" accept="file" <van-uploader multiple :max-count="5" :after-read="afterRead" upload-text="最多上传五个"
@delete="deleteFile(...arguments, 'measuresProjectFile')"> v-model="measuresProjectFile" accept="file" @delete="deleteFile(...arguments, 'measuresProjectFile')">
<template slot="default"> <template slot="default">
<div style=" <div style="
width: 2.13333rem; width: 2.13333rem;
...@@ -145,7 +145,8 @@ ...@@ -145,7 +145,8 @@
<van-field name="measuresAdministrationFile[]" label="管理措施附件"> <van-field name="measuresAdministrationFile[]" label="管理措施附件">
<template #input> <template #input>
<van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="measuresAdministrationFile" accept="file" <van-uploader multiple :max-count="5" :after-read="afterRead" upload-text="最多上传五个"
v-model="measuresAdministrationFile" accept="file"
@delete="deleteFile(...arguments, 'measuresAdministrationFile')"> @delete="deleteFile(...arguments, 'measuresAdministrationFile')">
<template slot="default"> <template slot="default">
<div style=" <div style="
...@@ -174,8 +175,8 @@ ...@@ -174,8 +175,8 @@
<van-field name="measuresEmergencyFile[]" label="应急措施附件"> <van-field name="measuresEmergencyFile[]" label="应急措施附件">
<template #input> <template #input>
<van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="measuresEmergencyFile" accept="file" <van-uploader multiple :max-count="5" :after-read="afterRead" upload-text="最多上传五个"
@delete="deleteFile(...arguments, 'measuresEmergencyFile')"> v-model="measuresEmergencyFile" accept="file" @delete="deleteFile(...arguments, 'measuresEmergencyFile')">
<template slot="default"> <template slot="default">
<!-- 11111111111 --> <!-- 11111111111 -->
<div style=" <div style="
...@@ -353,7 +354,7 @@ import selectFloor from "@/components/selectFloor.vue"; ...@@ -353,7 +354,7 @@ import selectFloor from "@/components/selectFloor.vue";
import addFloor from "./addFloor"; import addFloor from "./addFloor";
import { getUserInfo, getLocalUserInfo } from "@/utils/userInfo"; import { getUserInfo, getLocalUserInfo } from "@/utils/userInfo";
import { getFun, postFun } from "@/service/table.js"; import { getFun, postFun } from "@/service/table.js";
import { compress } from 'image-conversion';
export default { export default {
name: "addInherent", name: "addInherent",
components: { components: {
...@@ -509,8 +510,20 @@ export default { ...@@ -509,8 +510,20 @@ export default {
} }
this.getFloor(); this.getFloor();
}, },
methods: { methods: {
async afterRead(e) {
if (Array.isArray(e)) {
e.forEach(async i => {
const res = await this.compressFile(i.file);
let file = new window.File([res], i.file.name);
i.compressFile = file;
})
} else {
const res = await this.compressFile(e.file);
let file = new window.File([res], e.file.name);
e.compressFile = file;
}
},
initForm() { initForm() {
var userInfo = getUserInfo(); var userInfo = getUserInfo();
this.form.buildingIds = this.form.buildingIds =
...@@ -534,7 +547,11 @@ export default { ...@@ -534,7 +547,11 @@ export default {
var formDataJson = this.jsonToFormData(this.form); var formDataJson = this.jsonToFormData(this.form);
this.uploaderImg.forEach((item) => { this.uploaderImg.forEach((item) => {
if (item.file) { if (item.file) {
formDataJson.append("pictureFile[]", item.file); // formDataJson.append("pictureFile[]", item.file);
this.compressFile(item.file).then((res) => {
let file = new window.File([res], item.file.name);
formDataJson.append('pictureFile[]', file);
})
} else { } else {
formDataJson.append("pictureFile[]", item.fileId); formDataJson.append("pictureFile[]", item.fileId);
} }
...@@ -821,6 +838,14 @@ export default { ...@@ -821,6 +838,14 @@ export default {
}); });
return formData; return formData;
}, },
compressFile(file) {
if (file) {
return compress(file, 0.5).catch(error => {
this.$toast.fail("图片压缩失败");
return Promise.resolve(file);
})
}
},
onSubmit(values, event) { onSubmit(values, event) {
if (values == "save") { if (values == "save") {
event.preventDefault(); event.preventDefault();
...@@ -829,30 +854,34 @@ export default { ...@@ -829,30 +854,34 @@ export default {
var formDataJson = this.jsonToFormData(this.form); var formDataJson = this.jsonToFormData(this.form);
let url = "/risk/plan/inherent"; let url = "/risk/plan/inherent";
this.loadingStatus = true; this.loadingStatus = true;
this.uploaderImg.forEach((item) => {
this.uploaderImg.forEach(async (item) => {
if (item.file) { if (item.file) {
formDataJson.append("pictureFile[]", item.file); formDataJson.append('pictureFile[]', item.compressFile);
} else { } else {
formDataJson.append("pictureFile[]", item.fileId); formDataJson.append("pictureFile[]", item.fileId);
} }
}); });
this.measuresAdministrationFile.forEach((item) => { this.measuresAdministrationFile.forEach((item) => {
if (item.file) { if (item.file) {
formDataJson.append("measuresProjectFile[]", item.file); // formDataJson.append("measuresProjectFile[]", item.file);
formDataJson.append('measuresProjectFile[]', item.compressFile);
} else { } else {
formDataJson.append("measuresProjectFile[]", item.fileId); formDataJson.append("measuresProjectFile[]", item.fileId);
} }
}); });
this.measuresEmergencyFile.forEach((item) => { this.measuresEmergencyFile.forEach((item) => {
if (item.file) { if (item.file) {
formDataJson.append("measuresEmergencyFile[]", item.file); // formDataJson.append("measuresEmergencyFile[]", item.file);
formDataJson.append('measuresEmergencyFile[]', item.compressFile);
} else { } else {
formDataJson.append("measuresEmergencyFile[]", item.fileId); formDataJson.append("measuresEmergencyFile[]", item.fileId);
} }
}); });
this.measuresAdministrationFile.forEach((item) => { this.measuresAdministrationFile.forEach((item) => {
if (item.file) { if (item.file) {
formDataJson.append("measuresAdministrationFile[]", item.file); // formDataJson.append("measuresAdministrationFile[]", item.file);
formDataJson.append('measuresAdministrationFile[]', item.compressFile);
} else { } else {
formDataJson.append("measuresAdministrationFile[]", item.fileId); formDataJson.append("measuresAdministrationFile[]", item.fileId);
} }
......
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