uniapp上传图片转base64码（APP端，微信端）

怼烎@ 2022-10-23 08:03 865阅读 0赞

插件地址：[https://ext.dcloud.net.cn/plugin?id=123][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,'所以可以直接用来图片回显。

[https_ext.dcloud.net.cn_plugin_id_123]: https://ext.dcloud.net.cn/plugin?id=123