fix(fe): 修社区图片撑破网格;发帖限 3 张;上传偶发失败自动重试
- .photo-tile 补 width:100%+min-width:0:微信 image 默认 320x240, 不给宽高会冲破 photo-grid(社区帖子图片"爆炸") - 发帖图片上限从 9 张改成 3 张 - uploadFile 三重兜底:冷启动没 token 先续期、40100 续期重试、 网络/网关瞬时错误自动重试一次(后端 MD5 去重,重传安全) Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+4
-1
@@ -391,7 +391,10 @@ page{scrollbar-width:none;-ms-overflow-style:none}
|
|||||||
|
|
||||||
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1);margin-bottom:var(--sp-3)}
|
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1);margin-bottom:var(--sp-3)}
|
||||||
.photo-tile{
|
.photo-tile{
|
||||||
aspect-ratio:1;border-radius:var(--r-sm);background:var(--primary-soft);
|
/* 微信 image 默认 320x240,不显式给宽高会撑破网格。width:100% + min-width:0
|
||||||
|
让它缩进 1fr 格子,aspect-ratio 保持正方形,overflow 裁掉溢出 */
|
||||||
|
width:100%;min-width:0;aspect-ratio:1;overflow:hidden;
|
||||||
|
border-radius:var(--r-sm);background:var(--primary-soft);
|
||||||
display:flex;align-items:center;justify-content:center;font-size:56rpx;
|
display:flex;align-items:center;justify-content:center;font-size:56rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -539,8 +539,8 @@ Component({
|
|||||||
api.getTasks(id).then((tasks) => this.setData({ manageTasks: tasks || [] })).catch(() => {});
|
api.getTasks(id).then((tasks) => this.setData({ manageTasks: tasks || [] })).catch(() => {});
|
||||||
},
|
},
|
||||||
onPickPostImages() {
|
onPickPostImages() {
|
||||||
const left = 9 - this.data.postImages.length;
|
const left = 3 - this.data.postImages.length;
|
||||||
if (left <= 0) return wx.showToast({ title: '最多 9 张', icon: 'none' });
|
if (left <= 0) return wx.showToast({ title: '最多 3 张', icon: 'none' });
|
||||||
upload
|
upload
|
||||||
.chooseAndUploadImages(left)
|
.chooseAndUploadImages(left)
|
||||||
.then((list) => this.setData({ postImages: this.data.postImages.concat(list) }))
|
.then((list) => this.setData({ postImages: this.data.postImages.concat(list) }))
|
||||||
|
|||||||
+37
-19
@@ -106,19 +106,34 @@ function request(options, _retried) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 文件上传(multipart);token 过期同样先续期再重试一次
|
// 文件上传(multipart)。三重兜底,应对「第一次报错、重试就好」的偶发:
|
||||||
|
// 1) 上传前若还没 token(冷启动竞态),先续期拿到再传;
|
||||||
|
// 2) token 过期(40100)→ 续期后重试;
|
||||||
|
// 3) 网络 fail / 网关 5xx(响应非 JSON)等瞬时错误 → 自动重试一次。
|
||||||
|
// 后端按 MD5 去重,重复上传同一张图返回同一条记录,重试是安全的。
|
||||||
function uploadFile(filePath, _retried) {
|
function uploadFile(filePath, _retried) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const token = getToken();
|
// 瞬时错误:还没重试过就延后再传一次,否则直接失败
|
||||||
wx.uploadFile({
|
const softRetry = (err) => {
|
||||||
url: BASE_URL + '/api/upload',
|
if (_retried) return reject(err);
|
||||||
filePath,
|
setTimeout(() => uploadFile(filePath, true).then(resolve, reject), 500);
|
||||||
name: 'file',
|
};
|
||||||
timeout: 60000,
|
const fire = () => {
|
||||||
header: token ? { Authorization: 'Bearer ' + token } : {},
|
const token = getToken();
|
||||||
success(res) {
|
wx.uploadFile({
|
||||||
try {
|
url: BASE_URL + '/api/upload',
|
||||||
const body = JSON.parse(res.data);
|
filePath,
|
||||||
|
name: 'file',
|
||||||
|
timeout: 60000,
|
||||||
|
header: token ? { Authorization: 'Bearer ' + token } : {},
|
||||||
|
success(res) {
|
||||||
|
let body;
|
||||||
|
try {
|
||||||
|
body = JSON.parse(res.data);
|
||||||
|
} catch (e) {
|
||||||
|
// 非 JSON 多为网关 5xx / 服务重启窗口,按瞬时错误重试
|
||||||
|
return softRetry(new Error('上传失败,请重试'));
|
||||||
|
}
|
||||||
if (body.code === 0) return resolve(body.data);
|
if (body.code === 0) return resolve(body.data);
|
||||||
if (body.code === 40100 && !_retried) {
|
if (body.code === 40100 && !_retried) {
|
||||||
return recoverAuth()
|
return recoverAuth()
|
||||||
@@ -126,14 +141,17 @@ function uploadFile(filePath, _retried) {
|
|||||||
.catch(() => reject(new Error('登录已过期,请重进小程序')));
|
.catch(() => reject(new Error('登录已过期,请重进小程序')));
|
||||||
}
|
}
|
||||||
reject(new Error(body.message || '上传失败'));
|
reject(new Error(body.message || '上传失败'));
|
||||||
} catch (e) {
|
},
|
||||||
reject(new Error('上传响应解析失败'));
|
fail(err) {
|
||||||
}
|
softRetry(new Error((err && err.errMsg) || '上传失败'));
|
||||||
},
|
},
|
||||||
fail(err) {
|
});
|
||||||
reject(new Error((err && err.errMsg) || '上传失败'));
|
};
|
||||||
},
|
// 冷启动竞态:点得太快、登录还没完成就上传,先把 token 拿到再传
|
||||||
});
|
if (!getToken() && !_retried) {
|
||||||
|
return recoverAuth().then(fire, fire);
|
||||||
|
}
|
||||||
|
fire();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user