autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-06-11 18:59:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

上传图片压缩

Browse Source
This commit is contained in:
BOOL\25024
2023-07-18 10:59:28 +08:00
parent fa44dc7ca6
commit 2feb006554
2 changed files with 513 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
jsowell-ui/src/views/pile/merchant/components/adapayMember.vue
View File

@@ -647,6 +647,7 @@
:action="actionUrl"
:headers="headers"
:on-success="idCardSuccess"
:before-upload="beforeUpload"
:on-remove="idCardRemove"
:file-list="idCardList"
:limit="1"
@@ -665,6 +666,7 @@
:action="actionUrl"
:headers="headers"
:on-success="sideCardSuccess"
:before-upload="getBefore"
:on-remove="sideCardRemove"
:file-list="sideCardList"
list-type="picture-card"
@@ -684,6 +686,7 @@
:action="actionUrl"
:headers="headers"
:on-success="depositBankSuccess"
:before-upload="beforeData"
:on-remove="depositBankRemove"
:file-list="depositBankList"
list-type="picture-card"
@@ -703,6 +706,7 @@
:action="actionUrl"
:headers="headers"
:on-success="businessSuccess"
:before-upload="beforeFormer"
:on-remove="businessRemove"
:file-list="businessList"
list-type="picture-card"

204
jsowell-ui/src/views/pile/station/components/SiteInfo.vue
View File

@@ -8,13 +8,14 @@
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:file-list="fileList"
style="margin: 10px 0"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<el-form
:label-position="labelPosition"
@@ -57,7 +58,11 @@
<el-row :gutter="24">
<el-col :span="6">
<el-form-item prop="matchCars" label="适配车辆类型">
<el-select v-model="station.selectMatchCars" multiple placeholder="请选择">
<el-select
v-model="station.selectMatchCars"
multiple
placeholder="请选择"
>
<el-option
v-for="item in dict.type.match_cars"
:key="item.value"
@@ -69,7 +74,10 @@
</el-col>
<el-col :span="6">
<el-form-item prop="publicFlag" label="是否对外开放">
<el-select v-model="station.publicFlag" placeholder="请选择">
<el-select
v-model="station.publicFlag"
placeholder="请选择"
>
<el-option
v-for="item in publicFlagOptions"
:key="item.value"
@@ -82,7 +90,10 @@
</el-col>
<el-col :span="6">
<el-form-item prop="openFlag" label="是否营业中">
<el-select v-model="station.openFlag" placeholder="请选择">
<el-select
v-model="station.openFlag"
placeholder="请选择"
>
<el-option
v-for="item in openFlagOptions"
:key="item.value"
@@ -109,19 +120,27 @@
<el-row :gutter="24">
<el-col :span="6">
<el-form-item prop="stationLng" label="经度">
<el-input v-model="station.stationLng" disabled></el-input>
<el-input
v-model="station.stationLng"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="stationLat" label="纬度">
<el-input v-model="station.stationLat" disabled></el-input>
<el-input
v-model="station.stationLat"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="merchantName" label="运营商">
<el-input
:value="
station.merchantName === null ? '无' : station.merchantName
station.merchantName === null
? '无'
: station.merchantName
"
disabled
></el-input>
@@ -129,7 +148,10 @@
</el-col>
<el-col :span="6">
<el-form-item prop="stationType" label="站点类型">
<el-select v-model="station.stationType" placeholder="请选择">
<el-select
v-model="station.stationType"
placeholder="请选择"
>
<el-option
v-for="item in dict.type.station_type"
:key="item.value"
@@ -144,7 +166,10 @@
<el-row :gutter="24">
<el-col :span="6">
<el-form-item prop="construction" label="建设场所">
<el-select v-model="station.construction" placeholder="请选择">
<el-select
v-model="station.construction"
placeholder="请选择"
>
<el-option
v-for="item in dict.type.construction_type"
:key="item.value"
@@ -157,7 +182,10 @@
<el-col :span="6">
<el-form-item prop="electricityPrice" label="充电费率">
<el-input
:value="station.electricityPrice === null ? 0 : station.electricityPrice
:value="
station.electricityPrice === null
? 0
: station.electricityPrice
"
disabled
></el-input>
@@ -166,7 +194,11 @@
<el-col :span="6">
<el-form-item prop="servicePrice" label="服务费率">
<el-input
:value="station.servicePrice === null ? 0 : station.servicePrice"
:value="
station.servicePrice === null
? 0
: station.servicePrice
"
disabled
></el-input>
</el-form-item>
@@ -178,15 +210,18 @@
</el-col>
</el-row>
</el-form>
<el-button type="primary" style="margin-left: 94%" @click="present" v-has-permi = "['pile:station:edit']">提交</el-button>
<el-button
type="primary"
style="margin-left: 94%"
@click="present"
v-has-permi="['pile:station:edit']"
>提交</el-button
>
</div>
</template>
<script>
import {
getStationInfo,
updateStation,
} from "@/api/pile/station.js";
import { getStationInfo, updateStation } from "@/api/pile/station.js";
import bus from "@/bus/bus";
import { regionData } from "element-china-area-data";
import { getToken } from "@/utils/auth";
@@ -195,13 +230,13 @@ export default {
dicts: ["station_type", "match_cars", "construction_type"],
data() {
return {
actionUrl:process.env.VUE_APP_BASE_API+'/common/uploadOSS',
actionUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS",
dialogVisible: false,
headers: {
Authorization: "Bearer " + getToken()
Authorization: "Bearer " + getToken(),
},
imageUrl: null,
dialogImageUrl:'',
dialogImageUrl: "",
options: regionData,
labelPosition: "right",
station: {
@@ -247,25 +282,45 @@ export default {
],
rules: {
stationName: [
{ required: true, message: "请输入站点名称", trigger: "blur" },
{
required: true,
message: "请输入站点名称",
trigger: "blur",
},
],
areaCode: [
{ required: true, message: "请输入站点区域", trigger: "blur" },
{
required: true,
message: "请输入站点区域",
trigger: "blur",
},
],
address: [
{ required: true, message: "请输入地址", trigger: "blur" }
{ required: true, message: "请输入地址", trigger: "blur" },
],
stationTel: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{
required: true,
message: "请输入联系电话",
trigger: "blur",
},
],
matchCars: [
{ required: true, message: "请输入适配车辆类型", trigger: "blur" },
{
required: true,
message: "请输入适配车辆类型",
trigger: "blur",
},
],
publicFlag: [
{ required: true, message: "请填写是否对外开放", trigger: "blur" },
{
required: true,
message: "请填写是否对外开放",
trigger: "blur",
},
],
openFlag: [
{ required: true, message: "是否营业中", trigger: "blur" }
{ required: true, message: "是否营业中", trigger: "blur" },
],
// merchantAdminName: [
// { required: true, message: "请输入管理员", trigger: "blur" },
@@ -280,29 +335,98 @@ export default {
// { required: true, message: "请输入管理员", trigger: "blur" },
// ],
stationType: [
{ required: true, message: "请输入站点类型", trigger: "blur" },
{
required: true,
message: "请输入站点类型",
trigger: "blur",
},
],
construction: [
{ required: true, message: "请输入建设场所", trigger: "blur" },
{
required: true,
message: "请输入建设场所",
trigger: "blur",
},
],
region: [
{ required: true, message: "请输入充电费率", trigger: "blur" },
{
required: true,
message: "请输入充电费率",
trigger: "blur",
},
],
type: [
{ required: true, message: "请输入服务费率", trigger: "blur" }
{
required: true,
message: "请输入服务费率",
trigger: "blur",
},
],
businessHours: [
{ required: true, message: "请输入营业时间", trigger: "blur" },
{
required: true,
message: "请输入营业时间",
trigger: "blur",
},
],
},
fileList: [], // 用于图片回显
// dialogVisible: null,
};
},
created() {
},
created() {},
methods: {
// 对图片进行上传前处理压缩
beforeUpload(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
// 将图片绘制到一个canvas画布上，并设定压缩后的宽度和高度。
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const maxWidth = 800; // 设置压缩后的最大宽度
const maxHeight = 600; // 设置压缩后的最大高度
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
// 将canvas画布中的内容转换为Blob对象
canvas.toBlob(
(blob) => {
const compressedFile = new File(
[blob],
file.name,
{ type: blob.type }
);
resolve(compressedFile);
},
file.type,
0.8
); // 设置压缩质量，这里设为0.8
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
},
handleSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
console.log("图片上传成功 url：", this.imageUrl);
@@ -312,13 +436,13 @@ export default {
handleRemove(file, fileList) {
console.log("移除图片", file, fileList);
// 从pics数组中，找到图片对应的索引值
const i = this.fileList.findIndex(x => x.uid === file.uid);
const i = this.fileList.findIndex((x) => x.uid === file.uid);
// 调用splice方法，移除图片信息
this.fileList.splice(i, 1);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
console.log(this.dialogImageUrl)
console.log(this.dialogImageUrl);
this.dialogVisible = true;
},
handleChange() {
@@ -330,9 +454,9 @@ export default {
console.log(res);
this.station = res.data;
if (res.data.pictures != null) {
var pictures = res.data.pictures.split(',');
var pictures = res.data.pictures.split(",");
for (let i = 0; i < pictures.length; i++) {
this.fileList.push({"url": pictures[i]});
this.fileList.push({ url: pictures[i] });
}
}
console.log("queryStationInfo表格数据", this.station);
@@ -341,7 +465,7 @@ export default {
present() {
// 赋值
this.station.matchCars = this.station.selectMatchCars.join(",");
this.station.pictures = this.pictureList.join(',');
this.station.pictures = this.pictureList.join(",");
// console.log("matchCars赋值后：", this.station.matchCars);
this.$refs.stationRef.validate((valid) => {
if (valid) {
@@ -394,7 +518,7 @@ export default {
pictureList.push(this.fileList[i].url);
}
return pictureList;
}
},
},
};
</script>