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