小程序上传图片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.	['original', 'compressed']	否	所选的图片的尺寸
sourceType	Array.	['album', 'camera']	否	选择图片的来源
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.sizeType 的合法值

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

object.sourceType 的合法值

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

object.success 回调函数

参数

Object res

属性	类型	说明	最低版本
tempFilePaths	Array.	图片的本地临时文件路径列表 (本地路径)
tempFiles	Array.	图片的本地临时文件列表	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 开始支持，低版本需做兼容处理。

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