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

  业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.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