uniApp移动端-H5-微信小程序上传文件（图片，文档和视频等）

已于 2023-05-09 15:48:18 修改
阅读量2.4k 收藏 5
点赞数 1
文章标签： 小程序 uni-app 前端
于 2023-05-09 15:34:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45145119/article/details/130581411
版权

封装了一个插件可直接使用：插件地址：uniApp移动端-H5-小程序上传文件（图片，文档和视频等），插件可直接用Hbuilderx导入示例项目查看，

实现方法：
H5内部是使用uni-app官方内部方法uni.chooseFile
小程序端因hybrid不能使用本地HTML，所以插件提供的是uni-app官方内部方法wx.chooseMessageFile
移动端是使用 web-view 组件，在 web-view组件内使用input元素type="file"进行实现；目前支持上传所有文件（图片，视频，文件)，想要单个只上传图片或者视频或者某一个文件可以参考input的accept属性

Sarduhr-.-
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
历时八个月的uniapp微信小程序上传手机内部文件
EEstefan的博客
11-28 3205
背景 2021.4 党建助手 党建助手项目涉及调取手机内部文件进行上传 经自己努力——未果 经一位老学长和一位学长帮助—— 未果 最后 无奈舍弃（因为我大三课程又多又难+菜），解决方案是只适配H5，因为当时这个项目是用来做公众号的，未来可能会转小程序。 2021.7 小云通信 小云通信在党建助手基础上升级。自然而然就又涉及到了调取手机内部文件上传，同学A做这个模块，他调研了三天，跟我交流后决定找项目负责人学长B沟通换方案。 最后，又是设计从手机内部选择文件，改用微信提供的chooseMessageFile，
ShopWind 开源电商系统 V3.4.4 版发布，PC+H5+APP + 小程序多端可选
01-05
v3.x 商业版包含 PC、手机 H5、微商城、APP 客户端（Andorid+iOS）、微信小程序、今日头条小程序等多端，其中 PC 端为开源免费项目，移动端为增值项目。ShopWind 提供专业、快速、安全的底层软件设计和免费的更新...
移动端HTML5实现文件上传功能【附代码】
09-28
下面小编就为大家带来一篇移动端HTML5实现文件上传功能【附代码】。小编觉得听错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序使用webview实现文件上传功能
qq_60208156的博客
09-04 2229
解决uni.chooseMessageFile在电脑端无法获取文件问题
uniapp开发微信小程序-实现授权、拍照、录像、录音上传相关文件
最新发布
初心
05-17 369
uniapp开发微信小程序-实现授权、拍照、录像、录音上传相关文件
[微信小程序]WebView内嵌H5实现本地文件上传
IcyLeaves的博客们
04-13 5282
【官方文档】 小程序与H5如何互相跳转 小程序与H5交互以上传文件为例 微信小程序开放能力web-view使用之h5页面与小程序页面交互传值 快速小程序开发之微信小程序内嵌 H5 微信小程序web-view嵌套H5实现微信支付功能解决方案 微信小程序webview内嵌h5页面 使用web-view组件后，小程序就可以像浏览器一样访问一个页面，看似非常简单。 做到上面那样只需要在wxml页面里写上一行代码： <web-view src="http://www.baidu.com"></.
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是直接提供了。
uni-app开发微信小程序（获取多张本地相册图片并上传到服务器功能）
xxx_datou的博客
12-29 4470
思路： 用户触发某一事件弹出一个弹窗（用户可能直接手机拍摄或者直接从手机相册选择照片），用户选择完方式后，调用对应的api并把选择好的照片上传到服务器。 涉及到的API： 1、uni.showActionSheet 从底部向上弹出操作菜单 2、uni.chooseImage从本地相册选择图片或使用相机拍照 3、uni.uploadFile 将本地资源上传到开发者服务器 实现代码： ​ uni.showActionSheet({ itemList: ["拍照", "从手机相册...
芋道管理后台的移动端，基于 uni-app + uniui 实现，支持 H5、APP、微信小程序、支付宝小程序
04-03
芋道管理后台的移动端，基于 uni-app + uniui 实现，支持 H5、APP、微信小程序、支付宝小程序等，实现与 ruoyi-vue-pro、yudao-cloud 后端完美对接.zip
基于uniapp+vue+微信小程序+安卓app电影院订票小程序H5网站设计+源代码+文档说明+sql文件
11-12
基于uniapp+vue+微信小程序+安卓app电影院订票小程序H5网站设计 开发技术：uniapp + vue + ElementUI + 微信小程序 + 安卓app + Springboot 开发工具环境：HBuilder + 微信开发者工具 + VsCode + Idea + Mysql + ...
lilishop电商商城系统 商城移动端，使用Uniapp开发，可编译为所有移动终端项目及各小程序
04-28
lilishop电商商城系统 商城移动端，使用Uniapp开发，可编译为所有移动终端项目及各小程序
CRMEB 开源商城系统Java版，基于Java+Vue+Uni-app开发，在微信公众号、小程序、H5移动端都能使用
04-06
Java商城 免费 开源 CRMEB商城JAVA版，SpringBoot + Maven + Swagger + Mybatis Plus + Redis + Uniapp +Vue+elementUI 包含移动端、小程序、PC后台、Api接口；有产品、用户、购物车、订单、积分、优惠券、营销、...
微信小程序使用Typescript开发中input的传值问题
fengdeweilai的博客
06-19 1082
微信小程序使用TypeScript+TDesign 开发中input的传值问题
uniapp开发H5，实现H5上传文件（PDF），并可以预览下载删除
JPQLGZPW的博客
02-29 1543
总共需要用到四个API，
uniapp在H5端实现PDF和视频的上传、预览、下载
xiaoququ的博客
11-27 2587
【代码】uniapp在H5端实现PDF和视频的上传、预览、下载。
uniapp图片上传与压缩，兼容小程序与H5
resurgam
06-11 2787
【代码】uniapp图片上传与压缩，兼容小程序与H5。
uniApp 封装Upload组件实现图片和视频上传，解决官方api单一上传问题
weixin_46408500的博客
08-18 2937
uniapp 官方api没有同时上传图片和视频的组件，所以就只能自己做了，在此记录下！
Uniapp上传下载文件-不限制文件类型-附详细代码解析
CSDN_Admin0的博客
12-18 3429
UniApp是一款跨平台应用程序开发框架，它允许开发者使用同一套代码来构建基于多个操作系统的应用程序，包括iOS、Android、H5以及小程序等。UniApp基于Vue.js框架，在统一的API和组件规范下，提供了类似原生应用的开发体验。这意味着开发者只需编写一套代码，就可以将应用程序发布到多个平台，从而大大减少了开发和维护的工作量。
uni-app学习——API篇
张豆豆的博客
02-15 2778
整理uniapp和微信小程序部分API差异和使用时需要注意的点
uni-app一套代码微信小程序和app
04-02
uni-app是一套基于Vue.js的跨平台开发框架，它可以让开发者使用一套代码同时构建微信小程序和App（包括iOS和Android平台）。uni-app的特点如下： 1. 跨平台开发：使用uni-app可以只编写一套代码，即可在多个平台上运行，包括微信小程序、App、H5、支付宝小程序、百度小程序等。 2. Vue.js生态：uni-app基于Vue.js框架，开发者可以充分利用Vue.js的特性和生态系统，如组件化开发、数据绑定、指令等。 3. 原生能力：uni-app提供了一系列的API和组件，可以直接调用原生平台的能力，如获取地理位置、扫码、支付等。 4. 优化性能：uni-app通过编译器将代码转换为原生平台的代码，提高了运行效率和性能。 5. 开发便捷：uni-app提供了丰富的开发工具和插件，如HBuilderX、uni-app插件市场等，方便开发者进行开发和调试。 6. 社区支持：uni-app拥有庞大的开发者社区，可以分享经验、解决问题，并且有很多开源的组件和模板可供使用。 总结起来，uni-app是一套跨平台开发框架，可以帮助开发者快速构建微信小程序和App，减少开发成本和工作量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值