上传图片压缩

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

@@ -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"

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

@@ -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 {
+import { getStationInfo, updateStation } from "@/api/pile/station.js";
-  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>