用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序实战(二)-上传多图功能

Rolan 2020-6-2 00:53

一、需求说明 可选取相册照片,可拍照 可选择压缩大小,可选择原图大小 每次最多可选择 5 张图片 二、需求实现 2.1 选取照片实现 通过调用小程序 api - chooseImage 来实现选取照片功能 // 定义一个变量,用来存储 ...

一、需求说明

  1. 可选取相册照片,可拍照
  2. 可选择压缩大小,可选择原图大小
  3. 每次最多可选择 5 张图片

二、需求实现

2.1 选取照片实现

通过调用小程序 api - chooseImage 来实现选取照片功能

// 定义一个变量,用来存储用户选取的图片路径
let imagePaths
wx.chooseImage({
  count: 5,    // 限制每次最多选择 5 张
  sizeType: ['original', 'compressed'],  // 可选择压缩大小,可选择原图大小
  sourceType: ['album', 'camera'],   // 可选取相册照片,可拍照
  success: res => {   // 选取图片成功的回调函数
    imagePaths = res.tempFilePaths   // 存储选取的图片路径,是个数组
  }
})
复制代码

2.2 上传照片实现

// 定义一个变量,用来存储上传成功的图片路径
let successPaths = []
// wx.uploadFile 接口只能一次上传 1 张图片,所以需要先遍历
imagePaths.forEach((path) => {
  wx.uploadFile({
    url: api.apiRootUrl + '/distribution/addPicture',   // 接口地址
    filePath: path,	// 当前图片路径
    name: 'file',
    header: { "Content-Type": "multipart/form-data" }, 
    success: res => {					// 上传成功的回调函数
      if (res.code == 200) {
        successPaths.push(res.filePath)
      } else {
        this.showToast({
			title: res.msg
		  })
      }
      let filePaths = `formData.filePaths`
		// 存储上传成功的图片路径
      this.setData({
        [filePaths]: successPaths
      })
    }
  })
})
复制代码

2.3 图片预览实现

<view wx:for="{{formData.filePaths}}" wx:key="filePath">
	<image src="{{filePath}}"></image>
</view>
复制代码

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 张大鹅和郑小狗 来自: 掘金
  • 红罐王老吉 2020-6-4 12:15
    et imagePaths
    wx.chooseImage({
      count: 5,    // 限制每次最多选择 5 张
      sizeType: ['original', 'compressed'],  // 可选择压缩大小,可选择原图大小
      sourceType: ['album', 'camera'],   // 可选取相册照片,可拍照
      success: res => {   // 选取图片成功的回调函数
        imagePaths = res.tempFilePaths   // 存储选取的图片路径,是个数组
      }
    })
    这里的 可选取相册照片,可拍照 选择图片无法正常弹出选择抽屉,坑爹