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

前言：

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

使用步骤：

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

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

object.sizeType 的合法值

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

object.sourceType 的合法值

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

object.success 回调函数

参数

Object res

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

res.tempFiles 的结构

属性	类型	说明
path	string	本地临时文件路径 (本地路径)
size	number	本地临时文件大小，单位 B

2、wx.uploadFile

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

参数

Object object

属性	类型	默认值	必填	说明	最低版本
url	string		是	开发者服务器地址
filePath	string		是	要上传文件资源的路径 (本地路径)
name	string		是	文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
header	Object		否	HTTP 请求 Header，Header 中不能设置 Referer
formData	Object		否	HTTP 请求中其他额外的 form data
timeout	number		否	超时时间，单位为毫秒	2.10.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
data	string	开发者服务器返回的数据
statusCode	number	开发者服务器返回的 HTTP 状态码

返回值

UploadTask

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

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