uni-app 报一个关于uni-file-picker组件的BUG

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 报一个关于uni-file-picker组件的BUG

示例代码：

<uni-file-picker limit="5" :sourceType="sourceType" title="最多选择5张图片"  
    [@delete](/user/delete)="(e) => deleteimage(e,index)" @select="(e) => handleChange(e, index)"  
    v-model="item.pictureUrlList"></uni-file-picker>

deleteimage(e, type) {  
    for (var i = 0; i < this.executeDtoList[0].executeParamList[type].pictureUrlList.length; i++) {  
        if (e.index === i) {  
            this.executeDtoList[0].executeParamList[type].pictureUrlList.splice(i, 1);  
            console.log(this.executeDtoList[0].executeParamList)  
        }  
    }  
},

操作步骤：

<uni-file-picker limit="5" :sourceType="sourceType" title="最多选择5张图片"  
    [@delete](/user/delete)="(e) => deleteimage(e,index)" @select="(e) => handleChange(e, index)"  
    v-model="item.pictureUrlList"></uni-file-picker>

deleteimage(e, type) {  
    for (var i = 0; i < this.executeDtoList[0].executeParamList[type].pictureUrlList.length; i++) {  
        if (e.index === i) {  
            this.executeDtoList[0].executeParamList[type].pictureUrlList.splice(i, 1);  
            console.log(this.executeDtoList[0].executeParamList)  
        }  
    }  
},

预期结果：

不覆盖本地图片数组的数据

实际结果：

覆盖了我本地图片数组的数据

bug描述：

这块代码的作用是在删除图片的时候，同时删除本地图片数组的数据。 但在uni-file-picker删除选中的图片时，通过@delete监听事件调用deleteimage方法，这个方法会把本地数组里的数据更改为方法deleteimage(e, type)里传的e数据，这个我有点没明白是怎么回事。

如附件2打印出来的数据。上面红框显示的是调用方法之前的本地图片数组的数据。下面红框打印的是调用deleteimage方法之后的本地图片数组的数据，图片是成功删除了，但还会把e数据覆盖到我本地图片数组的数据。

如附件3，保证绝对没有其他的代码存在

项目信息 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 4.29
第三方开发者工具版本号 1.06.2407120
基础库版本号 3
项目创建方式 HBuilderX

Harmonyos Next教程
5 回复

可能是你 v-model 绑定了你要修改的这个数据吧，v-model 一般只是用来回显数据，你可以尝试打印 v-model 的绑定值看一看


v-model绑定的就是我图片本地数组

刚才我试了一下，跟v-model没有关系，因为我额外创建了一个没有绑定v-model的图片数组，只要删除照片，这个额外的数组的值也一样会被改变成e

我现在不能用pictureUrlList 这个名字，用pictureUrlList 2就不会被赋值，还是希望官方人员看看这是个什么问题。

针对您提到的uni-app中关于uni-file-picker组件的BUG，由于我无法直接访问您的具体错误日志或项目代码，我将提供一个常见的uni-file-picker组件使用案例，并附上一些调试和排查问题的思路，希望能帮助您定位并解决问题。请注意，实际代码可能需要根据您的具体需求和BUG情况进行调整。

uni-file-picker组件使用案例

首先，确保您已经在项目中正确安装并引入了uni-file-picker组件。以下是一个简单的使用示例：

<template>
  <view>
    <uni-file-picker
      @change="handleFileChange"
      :count="5"
      :mode="['image']"
      :limit="20 * 1024"
    />
    <view v-for="(file, index) in files" :key="index">
      <image :src="file.url" style="width: 100px; height: 100px;"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFileChange(e) {
      this.files = e.detail.files;
    }
  }
};
</script>

调试和排查思路

  1. 检查组件引入：确保uni-file-picker组件已经正确安装并在页面中引入。

  2. 查看控制台日志：运行项目，查看控制台是否有更详细的错误信息。错误信息通常会给出一些线索，比如是属性设置错误、事件监听失败还是其他问题。

  3. 检查事件监听：确保@change事件已经正确绑定，并且handleFileChange方法能够正常接收事件参数。

  4. 属性设置：检查uni-file-picker组件的属性设置，如count、mode、limit等，确保它们符合组件的要求。

  5. 文件权限：如果是在小程序或App中，检查是否有足够的文件读写权限。

  6. 版本兼容性：检查uni-app和uni-file-picker组件的版本是否兼容。有时候，组件在新版本的uni-app中可能会有一些不兼容的改动。

  7. 简化测试：尝试简化代码，只保留最基本的uni-file-picker组件和事件监听，看看问题是否依然存在。

如果以上步骤仍然无法解决问题，建议您查阅uni-app和uni-file-picker组件的官方文档，或者在相关社区和论坛中寻求帮助。在寻求帮助时，提供详细的错误信息和代码示例将有助于他人更快地定位问题。

回到顶部