uniApp之uni-file-picker使用踩坑

最新推荐文章于 2024-12-18 14:23:46 发布
最新推荐文章于 2024-12-18 14:23:46 发布
阅读量912 收藏
点赞数 3
分类专栏： uni-app 文章标签： uni-app uni-file-picker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanhuan03/article/details/143604386
版权

标题党~也不算坑吧 就是初体验
上传是需要存储一下子的，我以为uniApp是自己免费开的服务给大家中转使用，就没管这个事，但是官网是这么说的：
在这里插入图片描述
就我是怎么发现的，使用了一段时间后，上传的图片都裂了，然后发现我给后端送的链接有问题，然后排查，没戳，是使用那个服务空间调用超了，然后上传返回的链接都有问题~

解决：还是使用这个组件回显渲染，但是上传调用另一个api：

uni.chooseImage

在成功回调里面拿到上传的文件数据啥的，调用自家后端的上传接口就行！

今天决定把生活拉回轨道~

uni-app - 移动端（iOS&Android）批量上传文件，支持重传、删除、多选，携带参数，进度监控
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
10-07 3539
本文主要针对移动端（iOS和Android)。uni-app官方提供了接口从本地选择选择非媒体文件。如果是图片视频的话，可以选择、、等接口。但是 仅仅支持H5。除了 官方还提供了来选择任意类型的文件上传。但是请注意该组件在移动端仍然仅支持选择图片和视频。那么移动端，想要上传文件，我们该如何操作，按照官方的说法：App端如需选择非媒体文件，可在插件市场搜索文件选择，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。。这里我们选择使用插件：全文件上传选择非原生2.0版在生命
uniapp组件uni-file-picker中设置仅使用照相机和仅相册的权限
weixin_43163986的博客
03-19 1429
在uniapp中，我们通常会使用uni-file-picker这个组件，但是这个组件中，有点缺陷，就是没有对这个功能的传值设置，这里就要给组件进行修改了。在写uniapp项目中，对于上传图片有时会有这样的需求：只可使用照相机拍摄上传，不可使用相册。
【uniApp】uni-file-picker 实现文件上传
wan小小冰的博客
07-12 2131
uni-file-picker实现图片上传
uni-file-picker 文件选择上传踩坑
m0_67393686的博客
03-01 3989
https://ext.dcloud.net.cn/pluginid=4079 1、第一步必须导入uniapp的云服务空间，不然会报错 uniCloud.chooseAndUploadFile is not function 2、 <uni-file-picker :value=“videoValue” @success=“successVideo” @fail=“failVideo” limit=“1” file-mediatype=“video” mode=“grid” /> // 上传成
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
热门推荐
路虽远行则将至，事虽难做则必成。
06-19 2万+
最近在使用uni-app写H5移动端，有一个从手机拍摄从相册选择获取图片上传到文档服务器功能。查阅uni-app发现关于上传图片，uni-file-picker文件上传，uni.chooseImage，uni.uni.uploadFile它和pc端原理差不多，都是file对象上传，PC端是通过new file对象，uni-app是直接提供了。
uniapp 使用uni-file-picker 进行表单多文件/图片上传
m0_73419038的博客
03-14 1万+
我这里是进行了一个正常的表单多文件上传。
uni-app uni-file-picker 上传组件实战应用
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-16 3103
【代码】uni-app uni-file-picker 上传组件实战应用。
uni-file-picker上传视频的进度条
08-26
- *1* [uni-file-picker 文件选择上传踩坑](https://blog.csdn.net/m0_67393686/article/details/123216429)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...
uniapp中使用uni-file-picker上传文件
葫芦娃y的博客
01-24 7050
uniapp中使用uni-file-picker上传文件
【Uniapp】 uni-file-picker组件 上传图片或文件大小限制
qq_59562332的博客
05-11 6438
uni-file-picker文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间。但在开发过程中，我发现官方组件uni-file-picker不能设置单个图片或文件的大小限制，不满足开发需求。以下提供几种解决方案，仅供参考。
uniapp上传功能用uni-file-picker实现
肥晨开发的学习之路
07-20 1384
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。用image覆盖，就能实现完全自定义上传样式的功能（也能用其他的覆盖）
uniapp 实现 uni-file-picker 效果
滴水石穿
12-02 856
【代码】uniapp 实现 uni-file-picker 效果。
uniapp中的uni-file-picker组件上传多张图片到服务器
m0_71835253的博客
12-18 1439
2.vue2 封装mixin （vue3 可以封装 hooks） 方便后期调用。需要注意的是 请求的url ,需要换成自己的接口地址。3. 在使用的地方引入就可以了。就可以返回上传的信息了。加上这个取消自动上传。
uni-app小程序卡住&闪退&运行内存不足，请重新打开该小程序解决办法
m0_52952413的博客
03-11 4135
在使用uni-app开发小程序时，内存泄漏，闪退
如何修改uni-app中的uni-file-picker的默认样式
行胜于言，行动胜于空想
08-22 3016
使用过uni-app开发过项目的同学，相信大家对uni-ui多少有一定的了解，uni-file-picker是uni-ui的一个文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间，最近在使用时，但是它默认的样式并不是我们想要的，本文将记录一下对uni-file-picker的默认样式的修改。
安卓机uniapp组件uni-file-picker组件问题，
wangtengfei1121的博客
09-19 653
使用该组件发现安卓机点击上传按钮无效。原因：安卓机不能兼容original。解决方案：给组件添加属性，覆盖原属性。
uniapp使用uni-file-picker上传图片到后端
weixin_64908228的博客
04-03 2467
先说思路，uni-file-picker 套 uni.uploadFile，uni-file-picker得到文件路径，uni.uploadFile上传uniapp的，所以传到后端的数据只有这三个数据所以联调后端一直出错，根本原因在于uniapp上传图片不能使用这个file，需要在使用 uni.uploadFile 上传，这里面的file才是真正的file。
uniApp中图片文件上传插件(uniFilePicker)
babyxuqian的博客
06-21 5266
uniApp中图片文件上传插件(uniFilePicker)
uni-file-picker组件的使用——小程序上传图片（多张\一张）
qq_53857666的博客
11-09 6835
uni-file-picker组件的使用
uni-data-picker嵌套uni-datetime-picker
最新发布
03-12
<think>好的，我现在需要解决用户的问题：在uni-app中如何将uni-data-picker和uni-datetime-picker组件进行嵌套使用。用户希望看到具体的使用方法示例。首先，我需要回忆这两个组件的功能和用法。 首先，uni-data-picker是一个支持多级联选择的数据选择器，可以用于选择地区、分类等层级数据。它支持通过数据字典、本地数据或API获取数据源。而uni-datetime-picker是日期时间选择器，用于选择日期或时间。用户需要将这两个组件嵌套使用，可能是在选择某个数据后，再选择日期时间，比如先选择地区再选择该地区的某个时间。 接下来，我需要考虑如何将这两个组件结合。可能的场景是，在uni-data-picker选择完成后，触发某个事件，然后在相应位置显示uni-datetime-picker。需要处理数据联动，比如选择某个层级的数据后，动态显示日期选择器，并传递相关参数。 然后，我需要确保代码结构正确，包括数据绑定、事件处理和组件的嵌套方式。例如，在uni-data-picker的change事件中获取选中的值，然后根据这些值控制uni-datetime-picker的显示或数据源。同时，要注意表单提交时的数据整合，可能需要使用v-model来绑定各自的值，并在提交时合并数据。 另外，需要参考用户提供的引用内容。引用[1]中提到uni-data-picker支持多种数据源和展示方式，modelValue用于绑定值，可以支持数组形式。而引用[2]讨论表单提交，包括picker组件的使用。因此，在示例代码中，应该展示如何通过v-model绑定两个组件的值，并在提交时处理数据。 可能的步骤： 1. 在模板中放置uni-data-picker，绑定其v-model为selectedData，并设置change事件处理函数。 2. 当uni-data-picker的值变化时，触发事件，可以在此处决定是否显示uni-datetime-picker。 3. 在需要的位置放置uni-datetime-picker，绑定其v-model为selectedTime，并可能根据selectedData的值动态设置其属性，如日期范围。 4. 表单提交时，将两个组件的值合并处理。 需要注意的点： - 两个组件的v-model需要分别绑定不同的变量，避免冲突。 - 事件触发的时机，确保数据正确传递。 - 样式布局，可能需要将两个picker放在表单的不同位置，或者根据条件显示。 现在需要编写示例代码，演示基本的结构。例如，当选择完数据后显示日期选择器，或者两者同时显示，提交时收集所有数据。同时，处理表单提交的方法，将数据合并发送。 可能遇到的问题： - 如何根据uni-data-picker的选择结果动态改变uni-datetime-picker的选项？比如选择不同地区后，可选的日期范围不同。这可能需要调用API获取对应的日期数据，但示例中可以简化，仅展示绑定和事件处理。 - 表单验证，确保两个组件的数据都被正确填写，但用户的问题可能不需要复杂的验证，所以示例中可以省略。 综上所述，示例代码应展示两个组件的嵌套使用，数据绑定和事件处理，以及表单提交时的数据整合。需要确保代码符合uni-app的语法，并参考官方文档中的使用方法。</think>在uni-app中嵌套使用`uni-data-picker`和`uni-datetime-picker`，通常需要结合表单数据绑定和事件联动。以下是具体实现方法及示例： --- ### 实现步骤 1. **数据绑定** 通过`v-model`分别绑定两个组件的值，确保数据独立且可联动。 2. **事件监听** 监听`uni-data-picker`的`@change`事件，根据选择结果动态控制`uni-datetime-picker`的显示或参数。 3. **数据整合** 在提交时合并两个组件的值，用于后续接口传参或表单提交。 --- ### 示例代码 ```html <template> <view> <!-- 数据选择器 --> <uni-data-picker v-model="selectedData" :local-data="categories" @change="handleDataChange" popup-title="请选择分类" ></uni-data-picker> <!-- 日期时间选择器（根据数据选择结果动态显示） --> <uni-datetime-picker v-if="showDateTimePicker" v-model="selectedTime" type="date" :start="startDate" :end="endDate" ></uni-datetime-picker> <!-- 提交按钮 --> <button @click="submitForm">提交</button> </view> </template> <script> export default { data() { return { selectedData: [], // 存储uni-data-picker选中的值 selectedTime: '', // 存储uni-datetime-picker选中的时间 showDateTimePicker: false, categories: [ // 本地测试数据 { text: '电子产品', value: '1', children: [ { text: '手机', value: '1-1' }, { text: '电脑', value: '1-2' } ]} ], startDate: '2023-01-01', endDate: '2023-12-31' }; }, methods: { handleDataChange(e) { // 当选择数据后，显示日期选择器 this.showDateTimePicker = e.detail.value.length > 0; }, submitForm() { // 提交整合后的数据 const formData = { category: this.selectedData, time: this.selectedTime }; console.log('提交数据:', formData); // 调用API提交，例如：this.$api.post(formData); } } }; </script> ``` --- ### 关键点解析 1. **数据联动** `uni-data-picker`的`@change`事件返回选中值，通过`showDateTimePicker`控制`uni-datetime-picker`的显隐，实现条件渲染[^1]。 2. **作用域隔离** 两个组件通过独立的`v-model`绑定数据（`selectedData`和`selectedTime`），避免冲突。 3. **动态参数** 可根据`selectedData`的值动态设置`uni-datetime-picker`的`start`和`end`属性，例如从接口获取日期范围[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值