关于ajax和axios用base64方式上传头像

1、ajax和vue的axios上传的原理基本一致，这里只介绍axios

2、首先要选择一张图片，简单布下静态页面

这里的选择图片按钮点击弹出这个选择框，事实上是在微博的发布图片上找的灵感，大家可以去看看按F12查看他的点击按钮出现的布局，本人这里采用了

宽高设置和你的按钮一样的大小，让他定位到按钮上面，opacity隐藏，就能实现点击出现选择文件窗口，当然input里面也要做一些设置

还需要一个canvas标签来转换成base64的图片格式，需要注意：

①、宽高必须写在行间样式上，其他不做要求

②、宽高最好和你截取的矩形框一样大，否则他获取出来的base64是以你canvas宽高来的，就会出现这样的情况，只有左上角一部分

头像就变成这样了

前端设置：

后台node设置：新建这样的文件，复制粘贴代码

数据库设置：

base64用长文本类型来装

前端代码：

后台代码：

直接在app.js中写

因为是formdata发的后台就要用multer来接受

model层写这里就行了

以上操作后就能实现上传头像，更换用户头像了

对了，用户可以在地址栏存着

取的时候一个正则表达式即可