微信小程序实现图片上传

图片上传是常见功能，在微信小程序中怎么实现呢？

介绍两个api

wx.chooseImage - 选择图片

从本地相机中选择图片 - wx.chooseImage(Object object) | 微信开放文档

上传 - UploadTask | 微信开放文档

单张图片上传

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
		url: 'common/common/uploadFile',
	    name: 'file',
		filePath: res.tempFilePaths,
		header: {
				'Authorization': `bearer ${token}`
		},
		formData: {
				file: res.tempFilePaths[0],
		},
		success: (res) => {})
  }
})

 

多张图片上传

对于多张的图片上传，可以选择多张之后，调用upload每一张上传，也就是循环upload.

第二种是转换为base64,多张一次性调用接口上传

this.data = > 所有的base64集合，showData可以直接在img标签中显示图片

             wx.chooseImage({
					count: 1,
					success: (res) => {
						)
						 wx.getFileSystemManager().readFile({
							 filePath: res.tempFilePaths[0],
							 encoding: "base64",
							 success: (result) => {
								this.showData = 'data:image/png;base64,' + result.data;
								this.data =this.data.push(result.data);
							 }
						 })
					}
				})

上传，正常调用后端接口，传入this.data

       wx.request({
			url: '/uplod',
			method: 'POST',
			data: {imgs: this.data},
			headerList: {
				'content-type': 'application/x-www-form-urlencoded'
			},
            success (res) => {}
		})