xyzzz
xyzzz
  • 发布:2023-12-15 18:10
  • 更新:2023-12-16 11:44
  • 阅读:260

【报Bug】uni-file-picker在读取tempFilePaths只能读一个地址

分类:uni-app

产品分类: 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只有一个

2023-12-15 18:10 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

是多个,在选择图片的时候,一次性选择多个

要回复问题请先登录注册