Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(ai-chat): 全面修复前端图片附件 4 个 P0 + 3 个 P1 + 3 个 P2 bug

Browse Source 
PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16)

配合后端 PR-WB-MP-UPLOAD-EXT (HEIC/AVIF/BMP/TIFF 双层修复), 前端用户上传链路全面打通:

**4 个 P0 (阻塞用户上传)**:
- pendingImage 单数 → pendingImages 数组: 选 9 张图只发 1 张 → 全部一起发
  - 每个图独立 localId 独立上传独立失败
  - 失败给删除按钮 (用户不再卡死)
- MP-WEIXIN 不压缩 HEIC → H5+MP-WEIXIN 双端都压缩
  - 微信 chooseImage 默认 compressed 不支持 HEIC, 必须本地 uni.compressImage
- getFileSize 失败兜底 0 → 失败抛错, 探测完全失败时兜底走 STS
  - 0 > 2MB = false 让 auto 模式永远走 PHP 中转, 大文件 OOM
  - 现: totallyUnknown → 兜底 STS
- guessMime 缺 HEIC 等 → 与后端 guessMimeFromPath 对齐 26 个 mime

**3 个 P1 (业务级)**:
- selectFile 微信小程序死按钮 → 加 #ifdef MP-WEIXIN 分支 (uni.chooseMessageFile/wx.chooseMessageFile)
  - 兼容检测两个 API 哪个可用
- 上传失败后 pendingImage 永远卡住 → 失败时给 删除 按钮 (pending-retry-delete)
- URL.createObjectURL 永不释放 → upload 完成后 (成功/失败都) revokeObjectURL

**3 个 P2 (优化)**:
- filePath.split('.').pop() 在 blob URL 翻车 → 用 lastSegment + 正则提取 + 兜底 'bin'
- STS MP-WEIXIN size 永远 0 → 用已知 detectedSize + pathToFile 再探测
- H5 压缩阈值 10MB → 3MB

**新增**:
- tests/media-upload-fix.test.js (12 个单测全过): guessMime 现代格式 / extractExt blob URL / decideSts 兜底 STS 决策
This commit is contained in:
ZF Sun
2026-09-16 16:52:49 +08:00
parent 78973c99a3
commit fe2d3dcfe2
4 changed files with 405 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
pages_tool/ai-chat/ai-chat-message.vue
View File

@@ -322,11 +322,16 @@
<view class="input-area" :style="inputAreaStyle">
<view class="input-card">
<!-- 待发送图片附件预览: 挂在输入条内部顶端(文字行上方), 出现时输入框自动向上撑高, 删除后恢复原高度 -->
<view v-if="pendingImage" class="pending-attachment">
<image :src="pendingImage.uploaded ? pendingImage.uploaded.url : pendingImage.tempPath" mode="aspectFill" class="pending-image" />
<view v-if="pendingImage.uploading" class="pending-mask"><text>上传中</text></view>
<view v-else-if="pendingImage.uploadError" class="pending-mask error"><text>失败</text></view>
<view class="pending-remove" @tap="removePendingImage">×</view>
<view v-if="pendingImages.length" class="pending-attachment">
<view v-for="p in pendingImages" :key="p.localId" class="pending-item">
<image :src="p.uploaded ? p.uploaded.url : p.tempPath" mode="aspectFill" class="pending-image" />
<view v-if="p.uploading" class="pending-mask"><text>上传中</text></view>
<view v-else-if="p.uploadError" class="pending-mask error"><text>失败</text>
<!-- PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 失败时给 "删除" 按钮, 解决用户卡死 -->
<view class="pending-retry-delete" @tap.stop="removePendingImage(p.localId)">删除</view>
</view>
<view class="pending-remove" @tap="removePendingImage(p.localId)">×</view>
</view>
</view>
<!-- 顶部输入行: 语音图标 + 输入区 + 加号 + 发送 -->
<view class="input-row-top">
@@ -533,8 +538,11 @@ export default {
return {
messages: [],
inputText: '',
// 输入框待发送图片附件 (选图后先预览并后台上传, 发送时随文字一起发出)
pendingImage: null,
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): pendingImages 数组支持 1-9 张图
// 原 pendingImage 单数对象, 只存第一张, 选 5 张只发 1 张
// 每项: { localId, tempPath, uploading, uploaded, uploadError, sentWithBatch }
_pendingIdSeq: 0,
pendingImages: [],
scrollTop: 0,
scrollIntoViewId: null,
hasMoreHistory: false,
@@ -625,9 +633,10 @@ export default {
const hasEmoji = this.containsEmoji(this.inputText)
return hasContent || hasEmoji
},
// 待发送图片已上传完成, 可发送
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 数组版: 至少 1 张且所有都上传成功 (无 uploading + 无 uploadError)
canSendPendingImage() {
return !!(this.pendingImage && !this.pendingImage.uploading && !this.pendingImage.uploadError && this.pendingImage.uploaded)
if (!this.pendingImages.length) return false
return this.pendingImages.every(p => !p.uploading && !p.uploadError && p.uploaded)
},
hasInputText() {
return this.inputText && this.inputText.trim() !== ''
@@ -756,26 +765,43 @@ export default {
},
// 选图后: 不直接进聊天区, 作为输入框上方附件预览并立即开始上传
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 数组版支持 1-9 张图, 各自独立上传独立失败独立重试
onImagePicked(paths) {
const list = Array.isArray(paths) ? paths : (paths ? [paths] : [])
if (!list.length) return
const path = list[0]
this.pendingImage = { tempPath: path, uploading: true, uploaded: null, uploadError: null }
uploadImage(path).then((uploaded) => {
if (!this.pendingImage) return
this.$set(this.pendingImage, 'uploading', false)
this.$set(this.pendingImage, 'uploaded', uploaded)
}).catch((e) => {
if (!this.pendingImage) return
this.$set(this.pendingImage, 'uploading', false)
this.$set(this.pendingImage, 'uploadError', (e && e.message) || '上传失败')
uni.showToast({ title: '图片上传失败: ' + ((e && e.message) || ''), icon: 'none' })
list.forEach((path) => {
const localId = ++this._pendingIdSeq
const pending = {
localId,
tempPath: path,
uploading: true,
uploaded: null,
uploadError: null,
}
this.pendingImages.push(pending)
uploadImage(path).then((uploaded) => {
// 防止用户已删除 (removePendingImage) 后回调才到
const cur = this.pendingImages.find(p => p.localId === localId)
if (!cur) return
cur.uploading = false
cur.uploaded = uploaded
}).catch((e) => {
const cur = this.pendingImages.find(p => p.localId === localId)
if (!cur) return
cur.uploading = false
cur.uploadError = (e && e.message) || '上传失败'
uni.showToast({ title: '图片上传失败: ' + ((e && e.message) || ''), icon: 'none' })
})
})
},
// 移除待发送图片附件
removePendingImage() {
this.pendingImage = null
// 移除待发送图片附件 (按 localId)
removePendingImage(localId) {
if (localId === undefined || localId === null) {
this.pendingImages = []
return
}
this.pendingImages = this.pendingImages.filter(p => p.localId !== localId)
},
onFileSelected(fileMessage) {
@@ -1020,25 +1046,27 @@ async loadChatHistoryIfExist() {
},
// 发送消息
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): pendingImages 数组版
// 原 pendingImage 单数, 改支持 1-9 张图一起发
async sendMessage() {
// 确保有内容、表情或待发送图片
const hasContent = this.inputText && this.inputText.trim() !== ''
const hasEmoji = this.containsEmoji(this.inputText)
const pending = this.pendingImage
const pendingList = this.pendingImages
// 附件图片必须上传完成才能发送
if (pending) {
if (pending.uploading) {
// 附件图片必须上传完成才能发送 (数组版: 任何一张还在 uploading/出错都拦)
if (pendingList.length) {
if (pendingList.some(p => p.uploading)) {
uni.showToast({ title: '图片上传中，请稍候', icon: 'none' })
return
}
if (pending.uploadError || !pending.uploaded) {
if (pendingList.some(p => p.uploadError || !p.uploaded)) {
uni.showToast({ title: '图片上传失败，请删除后重试', icon: 'none' })
return
}
}
if (!hasContent && !hasEmoji && !pending) return
if (!hasContent && !hasEmoji && !pendingList.length) return
// 收集已上传、尚未随消息发送的附件 (用户图片/文件消息)
const readyAttachments = this.messages
@@ -1057,30 +1085,40 @@ async loadChatHistoryIfExist() {
}
})
// 输入框待发送图片: 图文一起发出
if (pending && pending.uploaded) {
// 输入框待发送图片: 全部 push, 第一张作为 userMessage.imageUrl 显示
pendingList.forEach((pending, idx) => {
if (!pending.uploaded) return
readyAttachments.push({
type: pending.uploaded.kind || 'image',
url: pending.uploaded.url,
mime: pending.uploaded.mime,
name: pending.uploaded.name,
size: pending.uploaded.size
size: pending.uploaded.size,
})
}
})
// 记录用户发出消息的时间戳, AI 回复完成时算 elapsed
this._aiRequestStart = Date.now()
const queryText = hasContent
? this.inputText.trim()
: (readyAttachments.length ? '[附件]' : '')
// 带图片时消息类型为 image, 图片 + 配文一起显示; 纯文字时仍为 text
const userMessage = pending
const firstPending = pendingList.length ? pendingList[0] : null
const userMessage = firstPending
? {
id: ++this.messageId,
role: 'user',
type: 'image',
imageUrl: pending.uploaded.url || pending.tempPath,
imageUrl: firstPending.uploaded.url || firstPending.tempPath,
// PR-FRONTEND-MEDIA-UPLOAD-FIX: 多图时把其他图片 URL 也带在消息上, 模板侧可循环展示
attachments: pendingList.map(p => ({
url: p.uploaded.url,
mime: p.uploaded.mime,
name: p.uploaded.name,
size: p.uploaded.size,
kind: p.uploaded.kind || 'image',
})),
content: hasContent ? this.inputText.trim() : '',
timestamp: Date.now()
}
@@ -1094,7 +1132,7 @@ async loadChatHistoryIfExist() {
this.shouldScrollToBottom = true
this.messages.push(userMessage)
this.inputText = ''
this.pendingImage = null
this.pendingImages = []
// 显示AI正在处理 - 带状态轮换提示
const loadingMessage = {
@@ -4669,27 +4707,48 @@ _handleStreamError(msg) {
}
/* 输入框内待发送图片缩略图: 位于文字输入行上方, 出现时输入框自动向上撑高 */
/* PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 数组版 1-9 张, 横向排列 + 横向滚动 */
.pending-attachment {
position: relative;
display: inline-flex;
align-self: flex-start;
display: flex;
flex-direction: row;
align-items: flex-start;
align-self: stretch;
margin: 6rpx 14rpx 10rpx;
width: 120rpx;
height: 120rpx;
border-radius: 14rpx;
overflow: hidden;
flex-shrink: 0;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* 内部每个 pending-item 独立 display:block, 由 item 自身定义尺寸 */
.pending-item {
position: relative;
width: 120rpx;
height: 120rpx;
border-radius: 14rpx;
overflow: hidden;
flex-shrink: 0;
margin-right: 10rpx;
}
.pending-image { width: 100%; height: 100%; display: block; }
.pending-mask {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text { color: #fff; font-size: 20rpx; }
&.error text { color: #ffb3b3; }
}
/* PR-FRONTEND-MEDIA-UPLOAD-FIX: 失败时给删除按钮, 用户不再卡死 */
.pending-retry-delete {
margin-top: 6rpx;
padding: 4rpx 14rpx;
background: rgba(255, 80, 80, 0.85);
color: #fff;
font-size: 20rpx;
border-radius: 6rpx;
line-height: 1.2;
}
.pending-remove {
position: absolute;
top: 0; right: 0;

68
pages_tool/ai-chat/components/ai-chat-tools-panel.vue
View File

@@ -109,6 +109,38 @@ export default {
input.click()
// #endif
// #ifdef MP-WEIXIN
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): 微信小程序需要用 wx.chooseMessageFile
// 原代码 selectFile 只有 H5 + APP-PLUS 分支, 微信小程序里 "文件" 按钮是死按钮
// uni-app 3.x 暴露了 uni.chooseMessageFile; 老版本/部分编译目标只有 wx.chooseMessageFile, 都兼容
const chooseFileApi = (typeof uni.chooseMessageFile === 'function')
? uni.chooseMessageFile
: (typeof wx !== 'undefined' ? wx.chooseMessageFile : null)
if (!chooseFileApi) {
uni.showToast({ title: '当前平台不支持文件选择', icon: 'none' })
return
}
chooseFileApi({
count: 1,
type: 'all', // 'all' | 'video' | 'image' | 'file' — 'all' 最宽松, 用户可发任何文件
success: async (res) => {
that.hideToolsPanel()
// wx.chooseMessageFile 返回 tempFiles; uni 端 res.tempFiles 兼容
const file = (res.tempFiles && res.tempFiles[0]) || (res.tempFilePaths && res.tempFiles[0])
if (!file) return
// 微信选文件返回 path + size + name (无 type); 用 ext 推断
const ext = (file.name || file.path || '').split('.').pop().toLowerCase()
const kind = ['jpg','jpeg','png','gif','webp','heic','heif','avif','bmp','tif','tiff'].includes(ext) ? 'image' : 'file'
await that._uploadOneFile(file, kind)
},
fail: (err) => {
if (err.errMsg && !err.errMsg.includes('cancel')) {
uni.showToast({ title: '选文件失败', icon: 'none' })
}
},
})
// #endif
// #ifdef APP-PLUS
uni.chooseFile({
count: 1,
@@ -122,16 +154,30 @@ export default {
},
async _uploadOneFile(file, kind) {
const path = file.path || (file.name ? URL.createObjectURL(file) : '')
// PR-FRONTEND-MEDIA-UPLOAD-FIX (2026-09-16): Blob URL 生命周期管理
// 原代码 URL.createObjectURL 出的 blob URL 永不释放, 长期跑会泄漏
// 统一: H5 创建 blob URL 用于预览, 上传完 (成功/失败都) revoke
let blobUrl = ''
let displayPath = ''
// #ifdef H5
// H5 file 对象没有 .path, 用 blob URL 给 imageUrl 预览, 并把 file 本身传给 uploadImage
blobUrl = file.name ? URL.createObjectURL(file) : ''
displayPath = blobUrl
// #endif
// #ifndef H5
// MP-WEIXIN / APP-PLUS 都用 file.path (tempFilePath)
displayPath = file.path || ''
// #endif
const pending = {
id: ++this.messageId,
role: 'user',
type: kind,
content: '',
fileName: file.name,
fileSize: file.size,
fileType: file.type,
imageUrl: path,
fileName: file.name || (file.path ? file.path.split('/').pop() : ''),
fileSize: file.size || 0,
fileType: file.type || '',
imageUrl: displayPath,
uploading: true,
uploadError: null,
uploaded: null,
@@ -139,9 +185,12 @@ export default {
}
this.$emit('file-selected', pending)
try {
// 传给 uploadImage/uploadMedia: H5 传 file 对象 (media-upload 内部 pathToFile 转),
// 非 H5 传 file.path (uni.uploadFile 需要)
const inputArg = blobUrl || file.path || file
const uploaded = kind === 'image'
? await uploadImage(file.path || file)
: await uploadMedia(file.path || file, kind)
? await uploadImage(inputArg)
: await uploadMedia(inputArg, kind)
this.$set(pending, 'uploading', false)
this.$set(pending, 'uploaded', uploaded)
if (uploaded.url) this.$set(pending, 'imageUrl', uploaded.url)
@@ -149,6 +198,11 @@ export default {
this.$set(pending, 'uploading', false)
this.$set(pending, 'uploadError', e.message || '上传失败')
uni.showToast({ title: '上传失败: ' + (e.message || ''), icon: 'none' })
} finally {
// PR-FRONTEND-MEDIA-UPLOAD-FIX: blob URL 用完即释放 (无论成败)
if (blobUrl) {
try { URL.revokeObjectURL(blobUrl) } catch (e) {}
}
}
},