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

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

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

关于ajax和axios用base64方式上传头像_第1张图片

关于ajax和axios用base64方式上传头像_第2张图片

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

关于ajax和axios用base64方式上传头像_第3张图片

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

关于ajax和axios用base64方式上传头像_第4张图片

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

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

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

关于ajax和axios用base64方式上传头像_第5张图片

头像就变成这样了

关于ajax和axios用base64方式上传头像_第6张图片

前端设置:

关于ajax和axios用base64方式上传头像_第7张图片

关于ajax和axios用base64方式上传头像_第8张图片

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

关于ajax和axios用base64方式上传头像_第9张图片

数据库设置:

关于ajax和axios用base64方式上传头像_第10张图片

base64用长文本类型来装

前端代码:

关于ajax和axios用base64方式上传头像_第11张图片

关于ajax和axios用base64方式上传头像_第12张图片

关于ajax和axios用base64方式上传头像_第13张图片

关于ajax和axios用base64方式上传头像_第14张图片

关于ajax和axios用base64方式上传头像_第15张图片

后台代码:

直接在app.js中写

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

关于ajax和axios用base64方式上传头像_第16张图片

model层写这里就行了

关于ajax和axios用base64方式上传头像_第17张图片

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

关于ajax和axios用base64方式上传头像_第18张图片

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

关于ajax和axios用base64方式上传头像_第19张图片

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

你可能感兴趣的:(关于ajax和axios用base64方式上传头像)