小程序上传图片wx.uploadFile用法

it2023-04-17  76

前言:

       小程序的上传和我们开发其他项目是不一样的,这里说一说他的用法。

使用步骤:

1、这里默认开发环境,并且默认不校验https,部署好环境 设置-》项目设置-》勾选

2、页面添加事件方法,这里核心方法是两个,一个是wx.chooseImage是获取图片,一个是 wx.uploadFile是上传图片

//选取图片 wx.chooseImage({ count: 1, sizeType: ['original'],//原图 sourceType: [ 'album','camera'],//支持选取图片 success (res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths[0]; //上传图片 wx.uploadFile({ //请求后台的路径 url: 'http://192.168.35.201:8090/image', //小程序本地的路径 filePath: tempFilePaths, //后台获取我们图片的key name: 'images', //额外的参数formData formData: { 'id': 'test', a:{ abc:'111'}, b:[1,2,3] }, success: function (res) { //上传成功 debugger }, fail: function (res) { debugger }, }) } })

使用api:

1、wx.chooseImage 从本地相册选择图片或使用相机拍照。

参数

Object object

属性类型默认值必填说明countnumber9否最多可以选择的图片张数sizeTypeArray.<string>['original', 'compressed']否所选的图片的尺寸sourceTypeArray.<string>['album', 'camera']否选择图片的来源successfunction 否接口调用成功的回调函数failfunction 否接口调用失败的回调函数completefunction 否接口调用结束的回调函数(调用成功、失败都会执行)

object.sizeType 的合法值

值说明最低版本original原图 compressed压缩图 

object.sourceType 的合法值

值说明最低版本album从相册选图 camera使用相机 

object.success 回调函数

参数

Object res

属性类型说明最低版本tempFilePathsArray.<string>图片的本地临时文件路径列表 (本地路径) tempFilesArray.<Object>图片的本地临时文件列表1.2.0

res.tempFiles 的结构

属性类型说明pathstring本地临时文件路径 (本地路径)sizenumber本地临时文件大小,单位 B

2、wx.uploadFile

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。

参数

Object object

属性类型默认值必填说明最低版本urlstring 是开发者服务器地址 filePathstring 是要上传文件资源的路径 (本地路径) namestring 是文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 headerObject 否HTTP 请求 Header,Header 中不能设置 Referer formDataObject 否HTTP 请求中其他额外的 form data timeoutnumber 否超时时间,单位为毫秒2.10.0successfunction 否接口调用成功的回调函数 failfunction 否接口调用失败的回调函数 completefunction 否接口调用结束的回调函数(调用成功、失败都会执行) 

object.success 回调函数

参数

Object res

属性类型说明datastring开发者服务器返回的数据statusCodenumber开发者服务器返回的 HTTP 状态码

返回值

UploadTask

基础库 1.4.0 开始支持,低版本需做兼容处理。

一个可以监听上传进度进度变化的事件和取消上传的对象

最新回复(0)