From 40ca1209119433237d0a7c4a9123d3ffbf505c28 Mon Sep 17 00:00:00 2001
From: tuqin <tuqin@tuqin.cn>
Date: 星期二, 27 十月 2026 14:16:58 +0800
Subject: [PATCH] fix(环保门禁): 照片上传改为存相对路径(原绝对URL手机访问不到)、上传前自动压缩到1280px、错误提示按状态码细分(413/401/415)
---
src/views/environmentAccess/components/PhotoCapture.vue | 72 ++++++++++++++++++++++++++++++++++-
1 files changed, 69 insertions(+), 3 deletions(-)
diff --git a/src/views/environmentAccess/components/PhotoCapture.vue b/src/views/environmentAccess/components/PhotoCapture.vue
index e42548f..23c5893 100644
--- a/src/views/environmentAccess/components/PhotoCapture.vue
+++ b/src/views/environmentAccess/components/PhotoCapture.vue
@@ -50,6 +50,48 @@
emit("update:modelValue", "");
};
+/**
+ * 涓婁紶鍓嶅帇缂╁浘鐗囷細鎸夋渶澶у搴︾瓑姣旂缉鏀� + JPEG 璐ㄩ噺鍘嬬缉
+ * 鎵嬫満鍘熷浘 2-5MB 鈫� 閫氬父 200-500KB锛岄伩鍏嶈 nginx 鐨� client_max_body_size 鎷︽埅
+ */
+const compressImage = (file, maxWidth = 1280, quality = 0.75) =>
+ new Promise((resolve) => {
+ // 闈炲浘鐗囨垨鐜涓嶆敮鎸佹椂鐩存帴杩斿洖鍘熸枃浠�
+ if (!/^image\//.test(file.type) || typeof document === "undefined") {
+ resolve(file);
+ return;
+ }
+ const objectUrl = URL.createObjectURL(file);
+ const img = new Image();
+ img.onload = () => {
+ URL.revokeObjectURL(objectUrl);
+ let width = img.naturalWidth || img.width;
+ let height = img.naturalHeight || img.height;
+ if (!width || !height) {
+ resolve(file);
+ return;
+ }
+ if (width > maxWidth) {
+ height = Math.round((height * maxWidth) / width);
+ width = maxWidth;
+ }
+ const canvas = document.createElement("canvas");
+ canvas.width = width;
+ canvas.height = height;
+ canvas.getContext("2d").drawImage(img, 0, 0, width, height);
+ canvas.toBlob(
+ (blob) => resolve(blob || file),
+ "image/jpeg",
+ quality
+ );
+ };
+ img.onerror = () => {
+ URL.revokeObjectURL(objectUrl);
+ resolve(file);
+ };
+ img.src = objectUrl;
+ });
+
const onChange = async (e) => {
const file = e.target.files && e.target.files[0];
e.target.value = "";
@@ -64,8 +106,11 @@
}
loading.value = true;
try {
+ // 涓婁紶鍓嶅厛鍘嬬缉锛氭墜鏈哄師鍥鹃�氬父 2-5MB锛屽帇鍒� 1280px 瀹姐�佽川閲� 0.75 鍚庝竴鑸� 200-500KB
+ // 鏃㈢渷鎵嬫満娴侀噺锛屼篃閬垮厤琚� nginx 鐨� client_max_body_size 鎷︿綇
+ const compressed = await compressImage(file);
const fd = new FormData();
- fd.append("file", file);
+ fd.append("file", compressed, file.name || "photo.jpg");
const res = await axios.post(import.meta.env.VITE_APP_BASE_API + "/common/upload", fd, {
headers: {
Authorization: "Bearer " + getToken(),
@@ -74,13 +119,34 @@
});
const body = res && res.data;
if (body && body.code === 200) {
- emit("update:modelValue", body.url || body.fileName || "");
+ // 鍙繚鐣欑浉瀵硅矾寰勶細鍚庣杩斿洖鐨� url 甯� host锛堝 http://10.136.58.73:7003/profile/...锛夛紝
+ // 鎵嬫満缁忕鍙ｈ浆鍙戞垨澶栫綉璁块棶鏃惰 host 涓嶉�氾紝蹇呴』鐢� /profile/... 鐩稿璺緞
+ let path = body.fileName || body.url || "";
+ if (/^https?:\/\//i.test(path)) {
+ try {
+ path = new URL(path).pathname;
+ } catch (e) {
+ // 瑙ｆ瀽澶辫触灏变繚鎸佸師鍊�
+ }
+ }
+ emit("update:modelValue", path);
ElMessage.success("涓婁紶鎴愬姛");
} else {
ElMessage.error((body && body.msg) || "涓婁紶澶辫触");
}
} catch (err) {
- ElMessage.error("涓婁紶澶辫触锛岃妫�鏌ョ綉缁滃悗閲嶈瘯");
+ const status = err && err.response ? err.response.status : 0;
+ if (status === 413) {
+ ElMessage.error("鐓х墖澶ぇ锛屼笂浼犺鏈嶅姟鍣ㄦ嫆缁濓紝璇峰帇缂╁悗閲嶈瘯");
+ } else if (status === 401) {
+ ElMessage.error("鐧诲綍宸茶繃鏈燂紝璇烽噸鏂扮櫥褰曞悗鍐嶄笂浼�");
+ } else if (status === 415) {
+ ElMessage.error("鏂囦欢鏍煎紡涓嶆敮鎸侊紝璇烽�夋嫨鍥剧墖鏂囦欢");
+ } else if (status) {
+ ElMessage.error("涓婁紶澶辫触锛圚TTP " + status + "锛夛紝璇烽噸璇�");
+ } else {
+ ElMessage.error("涓婁紶澶辫触锛岃妫�鏌ョ綉缁滃悗閲嶈瘯");
+ }
} finally {
loading.value = false;
}
--
Gitblit v1.9.3