uniapp上传图片转base64码(APP端,微信端)

插件地址:https://ext.dcloud.net.cn/plugin?id=123

 代码:

注意点 引入的时候 必须是对象{}引入  不可删除  否则会报错:(0 , _index.default) is not a function

<template>
	<view>
		<view @click="chooseImg">拍照</view>
		<view v-if="imgList.length > 0">
			<view v-for="(item,index) in imgList" :key="index">
				<image :src="item" mode=""></image>
			</view>
		</view>
	</view>
</template>
 
<script>

	import { pathToBase64, base64ToPath } from '../../utils/image-tools/index.js'
//注意点 引入的时候 必须是对象{}引入  不可删除  否则会报错:(0 , _index.default) is not a function
	export default {
		data() {
			return {
				imgList: [],
			}
		},
		methods:{
			chooseImg(){
				let that = this;
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						// #ifdef MP-WEIXIN
						uni.getFileSystemManager().readFile({
							filePath: tempFilePaths[0],
							encoding: 'base64',
							success: r => { 
								console.log(r.data)
								let base64 = 'data:image/jpeg;base64,'  + r.data;
								that.imgList.push(base64)
							}
						})
						// #endif
						// #ifdef APP-PLUS
						pathToBase64(tempFilePaths[0])
						  .then(base64 => {
							that.imgList.push(base64)
						  })
						  .catch(error => {
						    console.error(error)
						  })
						// #endif
				    }
				});
			}
		}
	}
</script>
 
<style>
</style>

注意点:

如果只在微信小程序中使用,方法内只是用

// #ifdef MP-WEIXIN
	uni.getFileSystemManager().readFile({
		filePath: tempFilePaths[0],
		encoding: 'base64',
		success: r => { 
		console.log(r.data)
		let base64 = 'data:image/jpeg;base64,'  + r.data;
		that.imgList.push(base64)
	}
})
// #endif

就可以达到要求,也就不用下载或者安装插件。此外需注意,该方法需要在返回的base64码前面拼接'data:image/jpeg;base64,'才能图片正常回显。

如果需要兼容到app,直接使用:

pathToBase64(tempFilePaths[0])
	.then(base64 => {
			that.imgList.push(base64)
	})
	.catch(error => {
			console.error(error)
})

安装或者下载插件后,直接使用,可以做到在app和微信小程序同时将图片转换为base64。此外需注意,该方法返回的base64带有'data:image/jpeg;base64,'所以可以直接用来图片回显。

猜你喜欢

转载自blog.csdn.net/weixin_44285250/article/details/114584020
今日推荐