uni-app uni-file-picker读取tempFilePaths时只能读取一个地址的Bug
uni-app uni-file-picker读取tempFilePaths时只能读取一个地址的Bug
产品分类：
uniapp/App
PC开发环境操作系统：
Windows
PC开发环境操作系统版本号：
win11
HBuilderX类型：
正式
HBuilderX版本号：
3.8.12
手机系统：
Android
手机系统版本号：
Android 10
手机厂商：
模拟器
手机机型：
雷电模拟器
页面类型：
vue
vue版本：
vue2
打包方式：
云端
项目创建方式：
HBuilderX
示例代码：
<template>
<view class="container">
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">可上传商品详情(暂未完全实现)bug
不填也可以上传，多个图片只显示一个</text>
</uni-card>
<uni-section title="上传图片" type="line">
<view class="example-body">
<uni-file-picker
limit="8"
title="最多选择8张图片"
v-model="imageValue"
fileMediatype="image"
mode="grid"
@select="select"
@progress="progress"
@success="success"
@fail="fail" >
</uni-file-picker>
</view>
</uni-section>
<uni-section title="输入商品相关信息" type="line">
<uni-forms class="textinput" ref="baseForm" label-position="top">
<uni-forms-item label="商品名" required>
<uni-easyinput v-model="itemname" placeholder="请输入商品名" />
</uni-forms-item>
<uni-forms-item label="商品介绍" required>
<uni-easyinput v-model="introduction" type="textarea" placeholder="请输入商品介绍" />
</uni-forms-item>
<uni-forms-item label="商品原价" required>
<uni-easyinput v-model="oprice" placeholder="请输入商品原价(￥)" />
</uni-forms-item>
<uni-forms-item label="商品现价" required>
<uni-easyinput v-model="nprice" placeholder="请输入商品现价(￥)" />
</uni-forms-item>
</uni-forms>
</uni-section>
<button class="uploadBtn" @click="onSubmit">上传商品</button>
</view>
</template>
<script>
export default {
data() {
return {
itemname:"",
introduction:"",
oprice:"",
nprice:"",
fileUrl:[],
sourceType: ['album', 'camera'],
imageStyles: {
width: 64,
height: 64,
border: {
radius: '50%'
}
},
imageValue:[],
listStyles: {
// 是否显示边框
border: true,
// 是否显示分隔线
dividline: true,
// 线条样式
borderStyle: {
width: 1,
color: 'blue',
style: 'dashed',
radius: 2
}
},
}
},
methods: {
upload(){
this.$refs.files.upload()
},
select(e){
console.log('选择文件：',e)
},
// 获取上传进度
progress(e){
console.log('上传进度：',e)
},
// 上传成功
success(e){
console.log('上传成功')
this.fileUrl=e.tempFilePaths
console.log(this.fileUrl)
},
// 上传失败
fail(e){
console.log('上传失败：',e)
}
},
onLoad() {
// uni.hideTabBar();
}
}
</script>
<style lang="scss">
.example-body {
padding: 10px;
padding-top: 0;
}
.custom-image-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
color: #333;
}
.textinput{
width: 95%;
margin: 0 auto;
}
.uploadBtn{
width: 95%;
margin: 0 auto;
background-color: #7e0c6e;
}
</style>
```
### 操作步骤：
- 将代码绑定服务空间后进行文件上传，上传多个地址时读取`tempFilePaths`只能读一个地址。
### 预期结果：
- 读取`tempFilePaths`读取了上传图片的列表。
### 实际结果：
- 读取`tempFilePaths`读取了上传图片的其中一个。
### bug描述：
- 在上传商品时，选择多个图片，但是打印的`tempfilepaths`只有一个
4 回复
在使用 uni-app 的 uni-file-picker 组件时，可能会遇到 tempFilePaths 只能读取一个地址的 Bug。这个问题通常是由于组件或框架的限制导致的，尤其是在处理多文件上传时。
可能的原因
- 组件限制：
uni-file-picker组件本身可能对tempFilePaths的处理存在限制，导致只能读取一个文件地址。 - 事件处理：在
onSuccess或onChange事件中，可能只处理了第一个文件的地址。 - 框架版本：
uni-app或uni-file-picker的版本可能存在 Bug，导致无法正确处理多文件上传。
解决方案
-
检查组件配置： 确保
uni-file-picker组件的配置支持多文件上传。例如，设置multiple属性为true。<uni-file-picker multiple [@success](/user/success)="onSuccess"></uni-file-picker> -
正确处理事件： 在
onSuccess或onChange事件中，确保正确处理所有文件的地址。例如：methods: { onSuccess(e) { const tempFilePaths = e.tempFilePaths; // 获取所有文件的临时路径 tempFilePaths.forEach((path) => { console.log(path); // 处理每个文件的地址 }); } } -
更新框架版本： 确保你使用的是最新版本的
uni-app和uni-file-picker。旧版本可能存在 Bug，更新版本可能会修复这个问题。 -
手动处理多文件上传： 如果组件本身无法满足需求，可以考虑手动处理多文件上传。例如，使用
uni.chooseImageAPI 来选择图片，并手动处理tempFilePaths。uni.chooseImage({ count: 9, // 最多可以选择 9 张图片 success: (res) => { const tempFilePaths = res.tempFilePaths; // 获取所有图片的临时路径 tempFilePaths.forEach((path) => { console.log(path); // 处理每个图片的地址 }); } });
