微信小程序 多文件上传方法

最近工作项目主要是微信小程序,这篇主要介绍接到的一个需求——多图片上传。
知道需求后马上查了下小程序的api,发现wx.uploadFile并不支持多文件上传,这样就得循环上传,肯定影响速度,后来发现有大神写了插件wx-formData,大家可以看一下,接下来就简单了,引入、传文件

下面是使用的代码:

const FormData = require('./formData/formData');

let data = this.data.formData.getData();
wx.request({
  url: '请求地址',
   header:{
       'content-type': data.contentType
   },
   method: 'post',
   data: data.buffer,
   success: function(res) {
     console.log(res)  
   },
   fail: function(error) {
     console.log(error)
   }
 })

具体的formData大家可以百度查询,这个formData的传输文件原理还没弄明白,会再后期慢慢补上,算是自己学习了。

下不来插件的可以从这里下载

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
微信小程序中,可以使用wx.uploadFile()方法实现文件上传。以下是一个简单的文件上传示例: 1. 在小程序页面的js文件中,添加以下代码: ```javascript // 选择文件并上传 function uploadFile() { wx.chooseImage({ count: 1, // 最多可选择的图片数量 success: function(res) { // 选择成功后将图片上传到指定服务器 const tempFilePath = res.tempFilePaths[0]; wx.uploadFile({ url: 'http://example.com/upload', // 上传接口地址 filePath: tempFilePath, name: 'file', // 文件对应的 key,服务器端通过这个 key 获取文件的二进制内容 success: function(res) { console.log(res.data); // 上传成功后的返回数据 }, fail: function(res) { console.log(res.errMsg); // 上传失败提示信息 } }); } }); } // 调用文件上传函数 uploadFile(); ``` 2. 需要在小程序的app.json文件中配置网络请求权限。在"permission"字段下添加以下内容: ```json "request": { "scope.userLocation": { "desc": "获取位置信息" }, "scope.writePhotosAlbum": { "desc": "保存到相册" }, "scope.camera": { "desc": "拍照" } } ``` 以上示例中,通过wx.chooseImage()方法选择要上传的文件,并通过wx.uploadFile()方法文件上传到指定服务器。在上传成功或失败后,可以通过回调函数获取相应的返回数据或错误信息。 请注意,上传的文件大小有限制,具体限制请参考微信官方文档。同时,需要确保服务器端已正确配置接收和处理文件上传的接口。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值