微信小程序文件上传 小程序怎么上传图片文件

小程序开发

2021-03-31

  文件上传是微信小程序中使用较为频繁的一个功能,对于刚开发小程序的人而言,可能会报错,这边为大家梳理了一下整体流程,一起来看下微信小程序文件上传方法吧。

  首先拟定需求:

  1、需要可以选取1~n张图片并展示

  选取1~n张图片并展示,小程序规定一次最多不能超过9张

  微信小程序提供wx.chooseImage接口来实现图片选择。具体内容可参考微信小程序文档

  关键点在于在data中定义一个数组用来存放选择的图片信息,并在success方法中对其进行赋值就好。然后使用wx:for来对imgList进行循环的列表渲染即可完成这n张图片的展示。

  2、需要可以对选取的图片进行预览

  微信小程序提供wx.previewImage接口可以对图片进行预览,具体功能参考文档(上面给出)。

  这个方法主要的两个参数:

  

微信小程序文件上传 小程序怎么上传图片文件


  在开发中,可以把预览图片的方法绑定在每个图片上,每个图片上需要绑定一个data-index来区分。然后在点击图片时触发预览图片的方法,在方法体内获取到该图片的index。那么 就是

  

微信小程序文件上传 小程序怎么上传图片文件


  3、在点击上传按钮后可以将选取的图片进行上传

  微信小程序提供了wx.uploadFile接口来实现上传文件的功能。不过需要注意的是这个方法调用一次只能上传一张图片(一个文件),那么当我们要上传多张图片的时候,就需要循环调用该方法。

  来看一下这个接口的参数:

  

微信小程序文件上传 小程序怎么上传图片文件


  4、实时监控上传进度

  小程序提供的wx.uploadFile接口会将文件上传的进度返回。返回的是一个uploadTask对象。这个上传进度指的是小程序将图片二进制化并传入到后端接口的进度,这个进度无关后端是否接收成功,是否成功写入服务器。

  

微信小程序文件上传 小程序怎么上传图片文件


  5、图形化表示上传进度

  以上就是今天为大家带来的微信小程序文件上传方法,步骤较为繁琐,中间也有一定的技术难点,需要大家仔细专研一下。想要了解更多关于小程序开发的相关内容,欢迎关注厦门在乎科技

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

立即咨询

CONTACT US

联系我们

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区莲花南路6号北方大厦601单元

公司地址