效果图:
编码:
<template>
<view class="container">
<button @click="chooseImage">选择图片</button>
<image v-if="base64Image" :src="base64Image"></image>
</view>
</template>
<script>
export default {
data() {
return {
base64Image: ''
};
},
methods: {
chooseImage() {
let _this = this
uni.chooseImage({
count: 1,
success(res) {
const tempFilePath = res.tempFilePaths[0];
uni.getFileSystemManager().readFile({
filePath: tempFilePath,
encoding: "base64",
success(data) {
console.log("图片的Base64数据:", data.data);
_this.base64Image = "data:image/jpeg;base64," + data.data;
},
fail(error) {
console.log("读取文件失败:", error);
}
});
},
fail(error) {
console.log("选择图片失败:", error);
}
});
}
}
}
</script>
<style>
.container {
margin: 20px;
}
</style>
注解:
_this.base64Image = "data:image/jpeg;base64," + data.data表示什么?
this.base64Image
是一个用于在视图中展示图片的数据绑定。通过给this.base64Image
赋值一个以"data:image/jpeg;base64,"开头的字符串,然后将Base64编码的图片数据拼接在后面,就可以将这个Base64格式的图片数据作为URL来展示在页面上
uni.chooseImage?
从本地相册选择图片或使用相机拍照
文档:uni.chooseImage(OBJECT) | uni-app官网
uni.getFileSystemManager().readFile({})?
使用uni-app中FileSystemManager的readFile方法读取文件
文档:uni.getFileSystemManager() | uni-app官网
filePath
(必填):要读取的文件路径,可以是相对路径或绝对路径。
encoding
(可选):文件的编码格式,默认值为 'utf8'。如果需要将文件内容转换为 Base64 格式,则需要将该值设置为 'base64'。
success
(可选):文件读取成功后的回调函数,接收一个参数表示读取到的文件数据。
fail
(可选):文件读取失败时的回调函数,接收一个参数表示错误信息。