ZF sun
fe2d3dcfe2
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 决策
344 lines
10 KiB
Vue
344 lines
10 KiB
Vue
<template>
|
|
<view class="tools-popup" v-if="visible">
|
|
<view class="tools-mask" @click="hideToolsPanel"></view>
|
|
<view class="tools-panel">
|
|
<view class="tools-header">
|
|
<text>{{ $lang('ai-chat.index.moreFunctions') }}</text>
|
|
<button class="close-btn" @click="hideToolsPanel">
|
|
<text class="iconfont icon-close"></text>
|
|
</button>
|
|
</view>
|
|
<view class="tools-grid">
|
|
<view class="tool-item" @click="selectImage">
|
|
<view class="tool-icon">
|
|
<text class="iconfont icon-image"></text>
|
|
</view>
|
|
<text class="tool-text">{{ $lang('ai-chat.index.image') }}</text>
|
|
</view>
|
|
<view class="tool-item" @click="selectFile">
|
|
<view class="tool-icon">
|
|
<text class="iconfont icon-file"></text>
|
|
</view>
|
|
<text class="tool-text">{{ $lang('ai-chat.index.file') }}</text>
|
|
</view>
|
|
<view class="tool-item" @click="startRecord">
|
|
<view class="tool-icon">
|
|
<text class="iconfont icon-voice"></text>
|
|
</view>
|
|
<text class="tool-text">{{ $lang('ai-chat.index.voice') }}</text>
|
|
</view>
|
|
<view class="tool-item" @click="selectLocation">
|
|
<view class="tool-icon">
|
|
<text class="iconfont icon-location"></text>
|
|
</view>
|
|
<text class="tool-text">{{ $lang('ai-chat.index.location') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { uploadImage, uploadMedia } from '@/common/js/media-upload.js'
|
|
/**
|
|
* ai-chat-tools-panel - 更多工具面板组件
|
|
*
|
|
* Props:
|
|
* visible: Boolean - 控制显示/隐藏
|
|
*
|
|
* Events:
|
|
* update:visible - 同步关闭状态
|
|
* image-selected - 选择图片，参数：图片消息对象
|
|
* file-selected - 选择文件，参数：文件消息对象
|
|
* voice-start - 开始语音
|
|
* location-selected - 选择位置，参数：位置消息对象
|
|
*/
|
|
export default {
|
|
name: 'AiChatToolsPanel',
|
|
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
messageId: 0
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
hideToolsPanel() {
|
|
this.$emit('update:visible', false)
|
|
},
|
|
|
|
selectImage() {
|
|
const that = this
|
|
uni.chooseImage({
|
|
count: 9,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
that.hideToolsPanel()
|
|
// 新交互: 选图后不直接进聊天区, 交给父组件作为输入框附件预览,
|
|
// 用户可继续输入文字, 点发送时图文一起发出
|
|
that.$emit('image-picked', res.tempFilePaths || [])
|
|
},
|
|
fail: (err) => {
|
|
if (err.errMsg && !err.errMsg.includes('cancel')) {
|
|
uni.showToast({ title: '选图失败', icon: 'none' })
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
selectFile() {
|
|
const that = this
|
|
// #ifdef H5
|
|
const input = document.createElement('input')
|
|
input.type = 'file'
|
|
input.accept = '*/*'
|
|
input.onchange = async (e) => {
|
|
const file = e.target.files[0]
|
|
if (!file) return
|
|
that.hideToolsPanel()
|
|
await that._uploadOneFile(file, file.type.startsWith('image/') ? 'image' : 'file')
|
|
}
|
|
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,
|
|
success: async (res) => {
|
|
that.hideToolsPanel()
|
|
const file = res.tempFiles[0]
|
|
await that._uploadOneFile(file, 'file')
|
|
}
|
|
})
|
|
// #endif
|
|
},
|
|
|
|
async _uploadOneFile(file, kind) {
|
|
// 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 || (file.path ? file.path.split('/').pop() : ''),
|
|
fileSize: file.size || 0,
|
|
fileType: file.type || '',
|
|
imageUrl: displayPath,
|
|
uploading: true,
|
|
uploadError: null,
|
|
uploaded: null,
|
|
timestamp: Date.now()
|
|
}
|
|
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(inputArg)
|
|
: await uploadMedia(inputArg, kind)
|
|
this.$set(pending, 'uploading', false)
|
|
this.$set(pending, 'uploaded', uploaded)
|
|
if (uploaded.url) this.$set(pending, 'imageUrl', uploaded.url)
|
|
} catch (e) {
|
|
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) {}
|
|
}
|
|
}
|
|
},
|
|
|
|
startRecord() {
|
|
this.$emit('voice-start')
|
|
this.hideToolsPanel()
|
|
},
|
|
|
|
selectLocation() {
|
|
uni.chooseLocation({
|
|
success: (res) => {
|
|
const locationMessage = {
|
|
id: ++this.messageId,
|
|
role: 'user',
|
|
type: 'location',
|
|
content: '',
|
|
latitude: res.latitude,
|
|
longitude: res.longitude,
|
|
address: res.address,
|
|
name: res.name,
|
|
timestamp: Date.now()
|
|
}
|
|
this.hideToolsPanel()
|
|
this.$emit('location-selected', locationMessage)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
/* 引入图标字体: 由 main.wxss 全局提供, 不再重复 import */
|
|
/* 引入全局变量 */
|
|
@import '../styles/ai-chat-global.scss';
|
|
|
|
.tools-popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
|
|
.tools-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.tools-panel {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: $bg-card;
|
|
border-radius: $radius-lg $radius-lg 0 0;
|
|
padding: 32rpx;
|
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.tools-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 32rpx;
|
|
border-bottom: 2rpx solid #f0f4f8;
|
|
padding-bottom: 16rpx;
|
|
position: relative; // 为 .close-btn 绝对定位提供参考
|
|
|
|
text {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 50%;
|
|
background-color: $bg-main;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
position: absolute; // 绝对定位: 紧贴 panel 顶部、放在"位置"图标左上方
|
|
top: -8rpx;
|
|
right: 10rpx; //
|
|
.iconfont {
|
|
font-size: 28rpx;
|
|
color: $color-text-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tools-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 24rpx;
|
|
|
|
.tool-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 24rpx 16rpx;
|
|
border-radius: $radius-md;
|
|
background-color: $bg-main;
|
|
|
|
.tool-icon {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 50%;
|
|
background-color: $bg-card;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16rpx;
|
|
box-shadow: $shadow-sm;
|
|
|
|
.iconfont {
|
|
font-size: 48rpx;
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
|
|
.tool-text {
|
|
font-size: 24rpx;
|
|
color: $color-text;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|