uni-app vue3项目uni-file-picker图片没有回显

uni-app vue3项目uni-file-picker图片没有回显

示例代码：

<uni-file-picker limit="1" title="请上传封面图片" @select="selectUpload" @success="uploadSuccess" @fail="uploadFail" value="fileList" v-model="fileList"></uni-file-picker>

```javascript
that.fileList.push({
name:'',
extname: 'jpg',
url:that.itemData.coverPath,
});

操作步骤：

  • 为uni-file-picker同时添加两个属性或添加其中任意一个属性:value="fileList"与v-model=“fileList” ，没有回显图片

预期结果：

  • uni-file-picker图片要能够通过url进行回显

实际结果：

  • 没有回显图片

bug描述：

  • 我尝试了 :value="fileList"与v-model="fileList"每个单独存在以及同时存在的情况，都没有回显。
  • 偶然发现去掉其中一个属性保存之后再加上在保存会出现一次回显，刷新后依旧没有回显

### 表格

| 信息类型       | 信息内容               |
|----------------|------------------------|
| 产品分类       | uniapp/H5              |
| PC开发环境     | Windows                |
| PC开发环境版本 | win11 23H2             |
| 开发工具类型   | 正式                   |
| 开发工具版本   | 4.45                   |
| 浏览器         | Chrome                 |
| 浏览器版本     | 132.0.6834.111         |
| 项目创建方式   | HBuilderX              |

更多关于uni-app vue3项目uni-file-picker图片没有回显的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

value 和 v-model, 都是用于回显的，只保留一个即可

更多关于uni-app vue3项目uni-file-picker图片没有回显的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我知道，但是两个每个的单独保留一个都试过了，依旧没有回显

在uni-app vue3项目中，uni-file-picker图片回显问题通常是由于数据格式或绑定方式不正确导致的。以下是解决方案：

  1. 确保fileList数据结构正确，需要包含name和url字段：
fileList: [{
  name: 'cover.jpg',
  url: 'https://example.com/path/to/image.jpg'
}]
  1. 移除v-model绑定，只使用value属性：
<uni-file-picker 
  limit="1" 
  title="请上传封面图片" 
  @select="selectUpload" 
  @success="uploadSuccess" 
  @fail="uploadFail" 
  :value="fileList">
</uni-file-picker>
  1. 如果图片是本地路径，确保使用绝对路径：
that.fileList = [{
  name: 'cover.jpg',
  url: '/static/cover.jpg' // 或者完整的http地址
}]

  1. 确保在onLoad或created生命周期中初始化fileList，而不是在mounted中。

  2. 检查图片URL是否可访问，如果是网络图片确保没有跨域问题。

  3. 如果问题依旧，尝试强制刷新组件：

this.$forceUpdate();
回到顶部