微信小程序单图上传和多图上传_微信小程序sizetype: ['original', 'compressed'],

图片上传主要用到

1、wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照。

参数

Object object

object.sizeType 的合法值

object.sourceType 的合法值

object.success 回调函数

参数

Object res

res.tempFiles 的结构

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
  }
})

2、wx.uploadFile(Object object)

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

参数

Object object

object.success 回调函数

参数

Object res

返回值

UploadTask

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

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

示例代码

wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

小程序案例：

.wxml 文件：

<view>
<button bindtap='photo' type='warn' style='width:50%; margin:50rpx auto'>选择图片</button>
</view>

.js 文件

（1）单图上传

  photo: function (e) {
    wx.chooseImage({
      count: 1,  //默认上传个数
      sizeType: ['original', 'compressed'],
      sourceType: ['album'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        var albumPaths = res.tempFilePaths[0]
          console.log('图片地址名称' + albumPaths);
                wx.uploadFile({
                  url: app.appUrl + 'img',
                  filePath: albumPaths,
                  name: 'img',
                  formData: {
                    'nickName': '123',//其他参数
                    'openid': 'xxssdazcs5gxxxaa',//其他参数
                  },
                  success(res) {
                    console.log(res)
                  }
                })
    }
  })
  },

（2）多图上传（相比单图上传，多了个for遍历）

  photo: function (e) {
    wx.chooseImage({
      count: 3,//默认上传个数
      sizeType: ['original', 'compressed'],
      sourceType: ['album'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        var albumPaths = res.tempFilePaths
        for (var i = 0; i < albumPaths.length; i++) {
          console.log('图片地址名称' + albumPaths[i]);
                wx.uploadFile({
                  url: app.appUrl + 'img',
                  filePath: albumPaths[i],
                  name: 'img',
                  formData: {
                    'nickName': '123',//其他参数
                    'openid': 'xxssdazcs5gxxxaa',//其他参数
                  },
                  success(res) {
                    console.log(res)
                  }
                })
        }
    }
  })
  },

后端代码：

public function img(){
	$file = request()->file('img');
	$info = $file->move(ROOT_PATH . 'public' . DS . 'static/uploads/ceshi');
}