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

图片上传主要用到

1、wx.chooseImage(Object object)

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

参数

Object object

属性 类型 默认值 必填 说明
count number 9 最多可以选择的图片张数
sizeType Array.<string> ['original', 'compressed'] 所选的图片的尺寸
sourceType Array.<string> ['album', 'camera'] 选择图片的来源
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.sizeType 的合法值

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

object.sourceType 的合法值

说明 最低版本
album 从相册选图
camera 使用相机
object.success 回调函数
参数
Object res
属性 类型 说明 最低版本
tempFilePaths Array.<string> 图片的本地临时文件路径列表
tempFiles Array.<Object> 图片的本地临时文件列表 1.2.0

res.tempFiles 的结构

属性 类型 说明
path string 本地临时文件路径
size number 本地临时文件大小,单位 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

属性 类型 默认值 必填 说明
url string 开发者服务器地址
filePath string 要上传文件资源的路径
name string 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容
header Object HTTP 请求 Header,Header 中不能设置 Referer
formData Object HTTP 请求中其他额外的 form data
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
object.success 回调函数
参数
Object res
属性 类型 说明
data string 开发者服务器返回的数据
statusCode number 开发者服务器返回的 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
      }
    })
  }
})

小程序案例:

.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');
}
相关推荐
腾马科技3 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
郑叔敲代码8 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
棋子一名11 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风12 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者812 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088913 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌14 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好26714 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
2501_9151063215 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆15 小时前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序