微信小程序开发之多图片上传+服务端接收

  业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存。

使用技术:

  在这章中将会使用到微信小程序wx.uploadFile(Object object) 和wx.chooseImage(Object object)接口,对图片大小和来源进行上传

wx.chooseImage() 概述:

  从本地相册选择图片或使用相机拍照,详细了解请阅读微信小程序开发文档(https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html?search-key=wx.chooseimage)

参数 Object object 属性 类型 默认值 必填 说明
count   number   9   否   最多可以选择的图片张数  
sizeType   Array.<string>   ['original', 'compressed']   否   所选的图片的尺寸  
sourceType   Array.<string>   ['album', 'camera']   否   选择图片的来源  
success   function       否   接口调用成功的回调函数  
fail   function       否   接口调用失败的回调函数  
complete   function       否   接口调用结束的回调函数(调用成功、失败都会执行)  
wx.uploadFile()概述:

  将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data,详细了解请阅读微信小程序开发文档(https://developers.weixin.qq.com/miniprogram/dev/api/wx.uploadFile.html?q=wx.uploadFile)。

参数 Object object 属性 类型 默认值 必填 说明
url   string       是   开发者服务器地址  
filePath   string       是   要上传文件资源的路径  
name   string       是   文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容  
header   Object       否   HTTP 请求 Header,Header 中不能设置 Referer  
formData   Object       否   HTTP 请求中其他额外的 form data  
success   function       否   接口调用成功的回调函数  
fail   function       否   接口调用失败的回调函数  
complete   function       否   接口调用结束的回调函数(调用成功、失败都会执行)  
废话不多说,上代码: .Wxml code:

<view class=http://www.likecs.com/'form-s2'> <view>门店照片(请选择三张)</view> <view> <view class=http://www.likecs.com/"weui-uploader__files" id=http://www.likecs.com/"uploaderFiles"> <block wx:for=http://www.likecs.com/"{{files}}" wx:key=http://www.likecs.com/"*this"> <view class=http://www.likecs.com/"weui-uploader__file" bindtap=http://www.likecs.com/"previewImage" id=http://www.likecs.com/"{{item}}" style=http://www.likecs.com/'margin-top:11px;'> <image class=http://www.likecs.com/"weui-uploader__img" src=http://www.likecs.com/"{{item}}" mode=http://www.likecs.com/"aspectFill" /> </view> </block> </view> <view class=http://www.likecs.com/"weui-uploader__input-box" style=http://www.likecs.com/'top:11px;'> <view class=http://www.likecs.com/"weui-uploader__input" bindtap=http://www.likecs.com/"chooseImage"></view> </view> </view> </view>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyddzp.html