微信小程序选择本地图片、视频的最新方法chooseMedia,转为为base64上传到后端接口

这篇具有很好参考价值的文章主要介绍了微信小程序选择本地图片、视频的最新方法chooseMedia,转为为base64上传到后端接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序选择本地图片上传

微信的api变动还是挺大的,之前选择图片的apiwx.chooseImage已被弃用,改为了wx.chooseMedia,本篇将介绍如何使用最新方法wx.chooseMedia进行选择图片上传并回显,以及转为为base64上传到后端接口
微信小程序选择本地图片、视频的最新方法chooseMedia,转为为base64上传到后端接口

1. wx.chooseMedia选择本地图片

微信小程序选择本地图片、视频的最新方法chooseMedia,转为为base64上传到后端接口
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({

	/**
	 * 页面的初始数据
	 */
	data: {
		imgList: []
	},
	/* 选择文件,得到临时路径 */
	uploadImg: function () {

		var that = this;
		// chooseImage已停止维护,需使用chooseMedia选择上传
		wx.chooseMedia({
			count: 9, // 最多可以选择的文件个数
			mediaType: ['image'], // 文件类型
			sizeType: ['original'], // 是否压缩所选文件
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
			success(result) {
				console.log(result);
				that.setData({
					imgList: result.tempFiles
				})
				// console.log(that.data.imgList);
			},

		})
	},

})

上传成功后,会返回一个数组,里面有图片的本地临时路径
微信小程序选择本地图片、视频的最新方法chooseMedia,转为为base64上传到后端接口

效果图:
微信小程序选择本地图片、视频的最新方法chooseMedia,转为为base64上传到后端接口

2. 图片临时路径转为base64编码

  • 有时候上传后端接口需要base64格式的图片,那么这时候就需要将临时路径tempFilePath转为base64编码格式。
  • 这里以选择一张图片转为base64为例:
// pages/chooseMedia/chooseMedia.js
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		imgList: []
	},
	/* 选择文件,得到临时路径 */
	uploadImg: function () {

		var that = this;
		// chooseImage已停止维护,需使用chooseMedia选择上传
		wx.chooseMedia({
			count: 1, // 最多可以选择的文件个数
			mediaType: ['image'], // 文件类型
			sizeType: ['original'], // 是否压缩所选文件
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
			success(result) {
				console.log(result);
				that.setData({
					imgList: result.tempFiles
				})
				wx.getFileSystemManager().readFile({ // 读取本地文件内容
					filePath: result.tempFiles[0].tempFilePath,
					encoding: 'base64', //编码格式
					success(res) {
						console.log(res.data);//图片base64编码
					}
				})
				// console.log(that.data.imgList);
			},

		})
	},

})

打开控制台,图片base64编码如下:
微信小程序选择本地图片、视频的最新方法chooseMedia,转为为base64上传到后端接口
之后将这串东西上传到后端接口即可文章来源地址https://www.toymoban.com/news/detail-419119.html

到了这里,关于微信小程序选择本地图片、视频的最新方法chooseMedia,转为为base64上传到后端接口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包