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 @@
"integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
"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": {
"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",
......
src/views/riskProject/add/addCurrent.vue
View file @ 54956921
......@@ -79,7 +79,7 @@
<van-field name="hdPicture1" label="风险图片">
<template #input>
<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">
<!-- 11111111111 -->
<div style="
......@@ -116,8 +116,8 @@
</van-field>
<van-field name="measuresProjectFile[]" label="技术措施附件">
<template #input>
<van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="measuresProjectFile" accept="file"
@delete="deleteFile(...arguments, 'measuresProjectFile')">
<van-uploader multiple :max-count="5" upload-text="最多上传五个" :after-read="afterRead"
v-model="measuresProjectFile" accept="file" @delete="deleteFile(...arguments, 'measuresProjectFile')">
<template slot="default">
<div style="
width: 2.13333rem;
......@@ -143,8 +143,9 @@
</van-field>
<van-field name="measuresAdministrationFile[]" label="管理措施附件">
<template #input>
<van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="measuresAdministrationFile"
accept="file" @delete="deleteFile(...arguments, 'measuresAdministrationFile')">
<van-uploader multiple :max-count="5" upload-text="最多上传五个" :after-read="afterRead"
v-model="measuresAdministrationFile" accept="file"
@delete="deleteFile(...arguments, 'measuresAdministrationFile')">
<template slot="default">
<div style="
width: 2.13333rem;
......@@ -170,7 +171,8 @@
</van-field>
<van-field name="measuresEmergencyFile[]" label="应急措施附件">
<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')">
<template slot="default">
<!-- 11111111111 -->
......@@ -472,7 +474,7 @@ import { getUserInfo, getLocalUserInfo } from "@/utils/userInfo";
import { getFun, postFun } from "@/service/table.js";
import { timestampToTime, generateId } from "@/utils/format";
import addFloor from "./addFloor";
import { compress } from 'image-conversion';
export default {
name: "addCurrent",
components: {
......@@ -615,6 +617,14 @@ export default {
// }
},
methods: {
compressFile(file) {
if (file) {
return compress(file, 0.2).catch(error => {
this.$toast.fail("图片压缩失败");
return Promise.resolve(file);
})
}
},
createFloor() {
this.isFloor = true;
},
......@@ -687,9 +697,6 @@ export default {
// on cancel
});
},
afterRead(file) {
console.log(file);
},
timestampToTimes(time) {
return timestampToTime(new Date(time), "DT2", true);
},
......@@ -1000,38 +1007,58 @@ export default {
});
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) {
if (values == "save") {
event.preventDefault();
}
// console.log('%c [ values ]-592', 'font-size:13px; background:pink; color:#bf2c9f;', values)
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";
this.loadingStatus = true;
this.uploaderImg.forEach((item) => {
this.uploaderImg.forEach(async (item) => {
if (item.file) {
formDataJson.append("pictureFile[]", item.file);
formDataJson.append('pictureFile[]', item.compressFile);
} else {
formDataJson.append("pictureFile[]", item.fileId);
}
});
this.measuresAdministrationFile.forEach((item) => {
if (item.file) {
formDataJson.append("measuresProjectFile[]", item.file);
// formDataJson.append("measuresProjectFile[]", item.file);
formDataJson.append('measuresProjectFile[]', item.compressFile);
} else {
formDataJson.append("measuresProjectFile[]", item.fileId);
}
});
this.measuresEmergencyFile.forEach((item) => {
if (item.file) {
formDataJson.append("measuresEmergencyFile[]", item.file);
// formDataJson.append("measuresEmergencyFile[]", item.file);
formDataJson.append('measuresEmergencyFile[]', item.compressFile);
} else {
formDataJson.append("measuresEmergencyFile[]", item.fileId);
}
});
this.measuresAdministrationFile.forEach((item) => {
if (item.file) {
formDataJson.append("measuresAdministrationFile[]", item.file);
// formDataJson.append("measuresAdministrationFile[]", item.file);
formDataJson.append('measuresAdministrationFile[]', item.compressFile);
} else {
formDataJson.append("measuresAdministrationFile[]", item.fileId);
}
......
src/views/riskProject/add/addInherent.vue
View file @ 54956921
......@@ -78,7 +78,7 @@
<template #input>
<van-uploader @delete="deleteFile(...arguments, 'pictureFile')" multiple :max-count="5" upload-text="最多上传五个"
v-model="uploaderImg">
v-model="uploaderImg" :after-read="afterRead">
<template slot="default">
<div style="
width: 2.13333rem;
......@@ -116,8 +116,8 @@
<van-field name="measuresProjectFile[]" label="技术措施附件">
<template #input>
<van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="measuresProjectFile" accept="file"
@delete="deleteFile(...arguments, 'measuresProjectFile')">
<van-uploader multiple :max-count="5" :after-read="afterRead" upload-text="最多上传五个"
v-model="measuresProjectFile" accept="file" @delete="deleteFile(...arguments, 'measuresProjectFile')">
<template slot="default">
<div style="
width: 2.13333rem;
......@@ -145,7 +145,8 @@
<van-field name="measuresAdministrationFile[]" label="管理措施附件">
<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')">
<template slot="default">
<div style="
......@@ -174,8 +175,8 @@
<van-field name="measuresEmergencyFile[]" label="应急措施附件">
<template #input>
<van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="measuresEmergencyFile" accept="file"
@delete="deleteFile(...arguments, 'measuresEmergencyFile')">
<van-uploader multiple :max-count="5" :after-read="afterRead" upload-text="最多上传五个"
v-model="measuresEmergencyFile" accept="file" @delete="deleteFile(...arguments, 'measuresEmergencyFile')">
<template slot="default">
<!-- 11111111111 -->
<div style="
......@@ -353,7 +354,7 @@ import selectFloor from "@/components/selectFloor.vue";
import addFloor from "./addFloor";
import { getUserInfo, getLocalUserInfo } from "@/utils/userInfo";
import { getFun, postFun } from "@/service/table.js";
import { compress } from 'image-conversion';
export default {
name: "addInherent",
components: {
......@@ -509,8 +510,20 @@ export default {
}
this.getFloor();
},
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() {
var userInfo = getUserInfo();
this.form.buildingIds =
......@@ -534,7 +547,11 @@ export default {
var formDataJson = this.jsonToFormData(this.form);
this.uploaderImg.forEach((item) => {
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 {
formDataJson.append("pictureFile[]", item.fileId);
}
......@@ -821,6 +838,14 @@ export default {
});
return formData;
},
compressFile(file) {
if (file) {
return compress(file, 0.5).catch(error => {
this.$toast.fail("图片压缩失败");
return Promise.resolve(file);
})
}
},
onSubmit(values, event) {
if (values == "save") {
event.preventDefault();
......@@ -829,30 +854,34 @@ export default {
var formDataJson = this.jsonToFormData(this.form);
let url = "/risk/plan/inherent";
this.loadingStatus = true;
this.uploaderImg.forEach((item) => {
this.uploaderImg.forEach(async (item) => {
if (item.file) {
formDataJson.append("pictureFile[]", item.file);
formDataJson.append('pictureFile[]', item.compressFile);
} else {
formDataJson.append("pictureFile[]", item.fileId);
}
});
this.measuresAdministrationFile.forEach((item) => {
if (item.file) {
formDataJson.append("measuresProjectFile[]", item.file);
// formDataJson.append("measuresProjectFile[]", item.file);
formDataJson.append('measuresProjectFile[]', item.compressFile);
} else {
formDataJson.append("measuresProjectFile[]", item.fileId);
}
});
this.measuresEmergencyFile.forEach((item) => {
if (item.file) {
formDataJson.append("measuresEmergencyFile[]", item.file);
// formDataJson.append("measuresEmergencyFile[]", item.file);
formDataJson.append('measuresEmergencyFile[]', item.compressFile);
} else {
formDataJson.append("measuresEmergencyFile[]", item.fileId);
}
});
this.measuresAdministrationFile.forEach((item) => {
if (item.file) {
formDataJson.append("measuresAdministrationFile[]", item.file);
// formDataJson.append("measuresAdministrationFile[]", item.file);
formDataJson.append('measuresAdministrationFile[]', item.compressFile);
} else {
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