日常项目的一个图片上传功能是最经常涉及到的，对于上传一些小的头像时，一开始觉得直接使用 Form 表单形式上传就好了，但是发现这样的话，一个小图片就会发送一个 http 请求资源，大量的小图片的请求资源的话，会造成服务器资源的负担。这时候就需要把图片转成 Base64 位的形式，然后在通过 POST 请求，将数据传到后端。
一、效果显示
二、Vue代码
- <template>
- <div>
- <el-upload action="" :multiple="false" :auto-upload="false" :show-file-list="false" :on-change="uploadChange">
- <el-button size="small" type="primary">点击上传</el-button>
- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
- </el-upload>
- <div>
- <img :src="base64">
- </div>
- </div>
- </template>
三、Vue方法
- uploadChange(file){
- var This = this;
- var reader = new FileReader();
- reader.readAsDataURL(file.raw);
- reader.onload = function(e){
- //console.log(this.result) // 这个就是base64编码了
- This.base64 = this.result;
- }
- }
博主只是一名前端的小白，只是把自己用到的知识分享一下，要是有什么不对的地方，欢迎大家提出~~
继续阅读
评论