小程序 图片上传_微信小程序开发[通俗易懂]

前言：

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

使用步骤：

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

object.sizeType 的合法值

object.sourceType 的合法值

object.success 回调函数

参数

Object res

res.tempFiles 的结构

2、wx.uploadFile

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

参数

Object object

object.success 回调函数

参数

Object res

返回值

UploadTask

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

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

今天的文章小程序 图片上传_微信小程序开发[通俗易懂]分享到此就结束了，感谢您的阅读。