el-upload将上传的图片转为base64

**使用 el-upload 将上传的图片转为 Base64**

在前端开发中，经常需要处理用户上传的文件，尤其是图片。传统方法是将图片上传到服务器，然后再进行处理。但是，这种方式有一个缺点：每次上传都需要向服务器发送请求，从而增加了网络流量和服务器负载。

使用 el-upload 将上传的图片转为 Base64，可以避免这种问题。Base64 是一种编码方式，能够将任意二进制数据转换为 ASCII 码，这样就可以在文本中传输二进制数据。

下面是使用 el-upload 将上传的图片转为 Base64 的示例代码：

html<template>
 <div>
 <el-upload class="upload-demo"
 action="/api/upload"
 :on-change="handleChange"
 :auto-upload="false">
 <el-button slot="trigger" type="primary">选取文件</el-button>
 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>
 </div>
</template>

<script>
export default {
 methods: {
 handleChange(file, fileList) {
 // 将图片转为 Base64 const reader = new FileReader();
 reader.onload = () => {
 this.$emit('input', reader.result);
 };
 reader.readAsDataURL(file.raw);
 }
 }
}
</script>

<style>
.upload-demo {
 width:300px;
}
</style>

在上面的代码中，我们使用 el-upload 组件来上传图片。我们定义了一个 handleChange 方法，这个方法会被触发每次用户选择文件时。

在 handleChange 方法中，我们使用 FileReader API 来读取选中的文件。如果是图片，我们就将其转换为 Base64，然后通过 $emit 方法向父组件发送事件，传递 Base64 编码的图片。

javascripthandleChange(file, fileList) {
 // 将图片转为 Base64 const reader = new FileReader();
 reader.onload = () => {
 this.$emit('input', reader.result);
 };
 reader.readAsDataURL(file.raw);
}

在父组件中，我们可以通过 $on 方法监听 handleChange事件，然后将 Base64 编码的图片保存到数据中。

javascriptexport default {
 data() {
 return {
 image: ''
 }
 },
 methods: {
 handleInput(value) {
 this.image = value;
 }
 },
 mounted() {
 this.$on('input', this.handleInput);
 }
}

这样，我们就可以在父组件中使用 Base64 编码的图片了。

**注意事项**

* 使用 FileReader API 需要确保浏览器支持此功能。
* 将大型文件转换为 Base64 可能会导致性能问题。
* 如果需要处理大量图片，建议使用服务器端进行处理，而不是在前端进行处理。

总之，使用 el-upload 将上传的图片转为 Base64 是一个简单有效的方法，可以避免向服务器发送请求，从而减少网络流量和服务器负载。