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

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

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

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

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

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

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

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

头像就变成这样了

前端设置:

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

数据库设置:

base64用长文本类型来装

前端代码:

后台代码:

直接在app.js中写

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

model层写这里就行了

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,761评论 0 17
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,301评论 4 61
  • 我一直认为自媒体是个高大上的词汇,是个新兴起来的事物。后来我发现我猜对了一半,它确实是个新兴的事物,但是却很...
    骑驴过海的猫阅读 448评论 0 1
  • 秋雨总是缠缠绵绵,萧萧瑟瑟,叙不完的烦琐哀愁,低落忧郁,雨里透着凉意,告诉人们暖热已经退席,要接受人生悲凉和...
    白彦飞阅读 197评论 0 0
  • 女儿上高中了,从每天都能见面到一周才能回家一回。就在她上高中的第一天,我和她爸提着她的行李箱,拿着为她备好的生活用...
    红运彤彤阅读 286评论 2 3