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

发布时间:2023-05-10 19:30

前言:

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

使用步骤:

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

小程序上传图片wx.uploadFile用法_第1张图片

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 开始支持,低版本需做兼容处理。

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号