微信小程序選擇本地圖片上傳

微信的api變動還是挺大的，之前選擇圖片的apiwx.chooseImage已被棄用，改為了wx.chooseMedia，本篇將介紹如何使用最新方法wx.chooseMedia進(jìn)行選擇圖片上傳并回顯，以及轉(zhuǎn)為為base64上傳到后端接口

1. wx.chooseMedia選擇本地圖片

wxml

<view class="container">
  <view bindtap="uploadImg" class="btn">選擇圖片</view>
  <view class="imgs">
    <text>圖片列表：</text>
    <image wx:for="{{imgList}}" wx:key="item"  src="{{item.tempFilePath}}" class="imgList" mode="widthFix"></image>
  </view>
 
</view>

wxss

.container {
	text-align: center;
}

.btn {
	background-color: #00b26a;
	padding: 15rpx 20rpx;
	color: #fff;
	border-radius: 20rpx;
	margin: 40rpx;
}

js

Page({

	/**
	 * 頁面的初始數(shù)據(jù)
	 */
	data: {
		imgList: []
	},
	/* 選擇文件,得到臨時路徑 */
	uploadImg: function () {

		var that = this;
		// chooseImage已停止維護(hù)，需使用chooseMedia選擇上傳
		wx.chooseMedia({
			count: 9, // 最多可以選擇的文件個數(shù)
			mediaType: ['image'], // 文件類型
			sizeType: ['original'], // 是否壓縮所選文件
			sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
			success(result) {
				console.log(result);
				that.setData({
					imgList: result.tempFiles
				})
				// console.log(that.data.imgList);
			},

		})
	},

})

上傳成功后，會返回一個數(shù)組，里面有圖片的本地臨時路徑

效果圖：

2. 圖片臨時路徑轉(zhuǎn)為base64編碼

• 有時候上傳后端接口需要base64格式的圖片，那么這時候就需要將臨時路徑tempFilePath轉(zhuǎn)為base64編碼格式。
• 這里以選擇一張圖片轉(zhuǎn)為base64為例：

// pages/chooseMedia/chooseMedia.js
Page({

	/**
	 * 頁面的初始數(shù)據(jù)
	 */
	data: {
		imgList: []
	},
	/* 選擇文件,得到臨時路徑 */
	uploadImg: function () {

		var that = this;
		// chooseImage已停止維護(hù)，需使用chooseMedia選擇上傳
		wx.chooseMedia({
			count: 1, // 最多可以選擇的文件個數(shù)
			mediaType: ['image'], // 文件類型
			sizeType: ['original'], // 是否壓縮所選文件
			sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
			success(result) {
				console.log(result);
				that.setData({
					imgList: result.tempFiles
				})
				wx.getFileSystemManager().readFile({ // 讀取本地文件內(nèi)容
					filePath: result.tempFiles[0].tempFilePath,
					encoding: 'base64', //編碼格式
					success(res) {
						console.log(res.data);//圖片base64編碼
					}
				})
				// console.log(that.data.imgList);
			},

		})
	},

})

打開控制臺，圖片base64編碼如下：

之后將這串東西上傳到后端接口即可文章來源地址http://www.zghlxwxcb.cn/news/detail-419119.html

到了這里，關(guān)于微信小程序選擇本地圖片、視頻的最新方法chooseMedia，轉(zhuǎn)為為base64上傳到后端接口的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！