微信小程序单图上传和多图上传

2019-06-23   阅读:3562   类型:后端   分类:微信小程序    标签: 微信小程序

图片上传主要用到

1、wx.chooseImage(Object object)

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

参数

Object object

属性类型默认值必填说明
countnumber9最多可以选择的图片张数
sizeTypeArray.<string>['original', 'compressed']所选的图片的尺寸
sourceTypeArray.<string>['album', 'camera']选择图片的来源
successfunction
接口调用成功的回调函数
failfunction
接口调用失败的回调函数
completefunction
接口调用结束的回调函数(调用成功、失败都会执行)

object.sizeType 的合法值

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

object.sourceType 的合法值

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

object.success 回调函数

参数
Object res
属性类型说明最低版本
tempFilePathsArray.<string>图片的本地临时文件路径列表
tempFilesArray.<Object>图片的本地临时文件列表1.2.0

res.tempFiles 的结构

属性类型说明
pathstring本地临时文件路径
sizenumber本地临时文件大小,单位 B
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-typemultipart/form-data。使用前请注意阅读相关说明

参数

Object object

属性类型默认值必填说明
urlstring
开发者服务器地址
filePathstring
要上传文件资源的路径
namestring
文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容
headerObject
HTTP 请求 Header,Header 中不能设置 Referer
formDataObject
HTTP 请求中其他额外的 form data
successfunction
接口调用成功的回调函数
failfunction
接口调用失败的回调函数
completefunction
接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数
Object res
属性类型说明
datastring开发者服务器返回的数据
statusCodenumber开发者服务器返回的 HTTP 状态码

返回值

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
      }
    })
  }
})

小程序案例:

image.png

.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');
}

image.png

腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://tpxhm.com/adetail/153.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×