uni-app中uni-file-picker怎么设置默认图片啊

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

uni-app中uni-file-picker怎么设置默认图片啊

uni-file-picker 默认图片设置问题

uni-file-picker 怎么设置默认图片啊?我用上传保存了图片,然后第二次打开要编辑时,图片都显示不出来了。

9 回复

<uni-file-picker :value="fileLists" file-mediatype="image"></uni-file-picker>
有个value属性,值可以参考
fileLists: [{
url: ‘https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg’,
extname: ‘png’,
name: ‘shuijiao.png’
}]


这个不行啊,还有没有其他方法啊,求

回复 1***@qq.com: 搞定没?

回复 1***@qq.com: 将:value=“fileLists” 改成v-model=“fileLists”

就这个破问题一年了还没解决吗,v-model :value 都试了,全不行,value按官方给的连图片占位都没有,直接给图片数组还有占位,但又不加载图片。 [ { “name”:“file.txt”, “extname”:“txt”, “url”:“https://xxxx”, // … } ]

上面是:value=“fileLists”,fileLists里这么用 [{
fileID: index,
url: ‘xxxxxxxxxxxxx’
}]

<uni-file-picker v-model=“imageValue” fileMediatype=“image” mode=“grid” @select=“select” @progress=“progress” @fail=“fail” file-extname=“png,jpg” :limit=“1” />
const imageValue = ref([]); imageValue.value.push({ url:profile.avatar, name:‘avatar’, extname: profile.avatar.split(".").pop(), fileID: profile.avatar, fileType: “image”, image: {width: 450, height: 450, location: profile.avatar}, path:profile.avatar, status: “success”, })

上面的方法都不管用。我把能加的属性都加上了。还是不显示。
value v-model 也切换着用过了。并不起作用 onMounted / onLoad 都切换着用了。没有效果。 我是在typescript 模式下测试的。

uni-file-picker 怎么默认上传原图啊 现在打开相册后都需要勾选下面的原图选项才会上传原图 怎么样可以默认上传原图

uni-app 中使用 uni-file-picker 组件时,默认情况下并不直接支持设置默认图片。不过,你可以通过一些编程技巧来实现这一需求。主要的思路是,在页面加载时,通过 uni-file-picker@change 事件或者手动设置数据,来显示默认图片。

以下是一个简单的示例,展示如何通过编程方式实现这一功能:

  1. 安装并引入 uni-file-picker 组件(如果尚未安装):

确保你已经在项目中安装了 uni-ui 组件库,并在页面引入了 uni-file-picker

// 在 main.js 中引入 uni-ui
import Vue from 'vue';
import UniUI from '@dcloudio/uni-ui';
Vue.use(UniUI);
  1. 页面模板
<template>
  <view>
    <uni-file-picker
      ref="filePicker"
      :mode="mode"
      :count="count"
      :limit="limit"
      :file-mediatype="fileMediatype"
      @change="handleFilesChange"
    ></uni-file-picker>
    <view v-if="defaultImage">
      <image :src="defaultImage" style="width: 100px; height: 100px;"></image>
    </view>
  </view>
</template>
  1. 页面脚本
<script>
export default {
  data() {
    return {
      mode: 'image', // 或者 'file'
      count: 9,
      limit: 9,
      fileMediatype: 'image',
      defaultImage: '', // 默认图片路径
      files: [] // 保存选中的文件列表
    };
  },
  mounted() {
    // 模拟一个默认图片路径
    this.defaultImage = '/static/default-image.png';
    // 模拟选中默认图片(这一步是为了在页面上显示默认图片,但不真正上传)
    this.files.push({
      path: this.defaultImage,
      url: this.defaultImage // 如果是网络图片,这里可以是图片的URL
    });
    // 手动触发 change 事件以显示默认图片(这一步是假设你需要通过组件显示)
    this.handleFilesChange(this.files);
  },
  methods: {
    handleFilesChange(e) {
      // 处理文件变化事件
      this.files = e.tempFiles;
    }
  }
};
</script>

注意

  • 上述代码中的 defaultImage 只是一个模拟的默认图片路径,你需要替换为你实际的图片路径。
  • handleFilesChange 方法用于处理文件选择事件,但在这个例子中,我们也用它来手动设置默认图片(仅用于显示,不真正上传)。
  • 如果 uni-file-picker 组件不支持直接显示默认图片,你可能需要在页面上额外添加一个 <image> 标签来显示默认图片,如示例所示。

通过这种方式,你可以在页面加载时显示一个默认图片,并且当用户选择其他图片时,更新显示的图片列表。

回到顶部