小程序上传大文件

目的

小程序 API wx.uploadFile 最大上传文件10M,如果需要上传大于 10M 文件,需要分片上传。
可以利用小程序组件 miniprogram-file-uploader 上传;

步骤
  1. 引入组件
    进入小程序根目录,运行:

    npm init
    npm i miniprogram-file-uploader
    
  2. 微信开发者工具打开项目,设置本地设置,使用 npm 模块,然后 构建npm
    在这里插入图片描述
    在这里插入图片描述
    构建完成后会自动创建文件夹 miniprogram_npm

  3. 页面中使用组件

    import Uploader from 'miniprogram-file-uploader';
    if (Uploader.isSupport()) {
      const uploader = new Uploader({
        tempFilePath,
        totalSize: size,
        uploadUrl: UPLOAD_URL,
        mergeUrl: MERGE_URL,
      })
    
      uploader.upload()
    }
    

    小程序源文档: miniprogram-file-uploader.
    gitHub地址:git-miniprogram-file-uploader.

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在uni-app中实现小程序上传文件的方法可以使用文件切片上传的方式。首先,需要明确需求和方案,然后可以开始动手了。大文件上传的难点之一是实现断点续传。具体的实现方法是使用uni-app官方内部方法uni.chooseFile来实现H5端的上传,而在小程序端,由于不能使用本地HTML,可以使用uni-app官方内部方法wx.chooseMessageFile。在移动端,可以使用web-view组件,并在该组件内使用input元素的type="file"来实现上传。目前,该方法支持上传各种类型的文件,如图片、视频、文件等。如果只想上传单个类型的文件,比如只上传图片或者视频或者某个特定类型的文件,可以参考input的accept属性。切片上传文件是最复杂的部分之一,需要将文件切割成多个片段并进行上传。关于具体的切片上传实现方式,可以参考uniapp文档以及微信官方文档中关于FileSystemManager的部分。在实现断点续传时,需要注意一些细节。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uniapp 微信小程序 分片 断点续传 大文件上传](https://blog.csdn.net/qq_34157798/article/details/119324994)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [uniApp移动端-H5-微信小程序上传文件(图片,文档和视频等)](https://blog.csdn.net/weixin_45145119/article/details/130581411)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值