位置: IT常识 - 正文

图片上传流程&前端上传文件&后端保存文件&并返回图片地址(上传图片照片)

编辑：rootadmin

图片上传流程&前端上传文件&后端保存文件&并返回图片地址

推荐整理分享图片上传流程&前端上传文件&后端保存文件&并返回图片地址(上传图片照片)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:图片上传流程步骤规范,图片上传平台视频教程,上传图片,图片上传流程步骤规范,图片上传怎么操作,图片上传流程步骤规范,图片上传怎么操作,图片上传流程步骤规范,内容如对您有帮助，希望把文章链接给更多的朋友！

也是在最近一点时间写小demo 遇到的一些问题

比如在用户界面，用户选择本地的一张照片，前端把照片传到后端，后端怎么把照片保存到服务器，然后返回给图片线上地址。也是找了一些文章，然后分享下。

技术

前端：react

后端：egg.js(node框架)

base64 转换

转二进制保存图片

base64(mdn)

Base64 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。

Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。Base64 也被一些应用（包括使用 MIME 的电子邮件）和在 XML 中储存复杂数据时使用。

为什么转成base64&好处传输信道只支持ASCII字符，不方便传输二进制流的场合。含有非ASCII字符，容易出现编码问题。所以需要用base64转化为ascii字符。Base64用于将二进制数据编码成ASCII字符（图片、文件等都可转化为二进制数据）。图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。将图片转换为base64编码最常见的应用就是在将网页中的一些图片转为base64编码可以实现网页图片在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。获取文件的base64格式<input type="file"><button>提交</button>

选择一张图片文件，然后点击提交按钮我们就会得到一个 base64字符串

const files = document.querySelector('input[type=file]') const btn = document.querySelector('button') btn.addEventListener('click', function () { var reader = new FileReader(); reader.readAsDataURL(files.files[0]); reader.onloadend = function () { var base64 = reader.result; console.log(base64); } })

console：

我们可以通过这个 base64 格式的字符串，直接复制到浏览器的地址上，就能访问图片

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADMUExURUdwTPn5+/j4/Pn5+/n5/Pn5+/n5+/n5+/j4+/n5+vv7+/j4+/n5+vv7+/n5+/j4+/j4+vn5+vn5/Pj4+/r6+vr6/Pn5+/n5+/r6+vr6/Pn5+/j4+vj4+gAAAPHx8wcHB0ZGRkdHSLS0trOztbKytLGxs2NjZAYGBkxMTfPz9dHR0pCQkggICPb2+F5eX2JiYxoaGkZGR4+PkdLS093d38jIyQkJCUtLTDc3N7W1t9PT1I2Nj2LkZLoAAAAkdFJOUwD+IpKwVQT57P1y0kIM58w8BvB03wjRW7kzYoka7wJtZbFuA8zxGUAAAAIESURBVFjDrZjpdoIwEIWjoIC7goJQ1w7a1ta6dt/7/u/UKNrWhWSCc/8y5ztAMncWxuLVbvqB3nBMwzCdhh74zTZLoLOO3oI9tfTOmRql7noWHJXluXU0pmiXQKCSXURhsjkTJDJzWTmnkgeE8hUJpqqlAKWUVhVx0mVAq5yO5xRqoKBaIY6TMUBJRuY4p2uBoqzu0fdR5nDSkXcqGJBAxsF/StcgkWp7Z1ctQ0KVd++TBoml7eRFKjko9S9bsnk4Qfm/DM7BScr9+o95Gsjc+pMNJ8re+KrID19eB3JQKXJfNz5ieReGD59ykrsGefEB85BrOJKCvHXdESTrJMSRrFWV6gsCxiGS1OGgnuD582JDupKAdF6XW6KA0RBHarVZUxxxjSQ1mQ8kJJ8FQEIKmA4kJJ015Pf25lZOajAH8KTFLDbEYSgL2ZLu462EoarQ4CMCvcfXJRRocBlxwm8ByFTgXEwFn+YocAQe58iPH8Xhx6+TcPiFDEg4PEV8Eg5PWqGNTLEcbiNCY5tjOdzYhFY7QXJWVoswfzlnbf6icjR745xHOWddjkQFEr7Gk6elPIk8WcnGypU3EShtmgiytoau0SJr/eiaUbL2mK5hpxshyIYaujGLbvCjG0XphmO6cZ1ugUC30qBbshCufegWUYSrsWhZ1+8dLut6qsu6SOcq68Mf88U7H+osen4AAAAASUVORK5CYII=

这串字符串其实就是一张照片的DataURL，就是利用base64编码把图片数据翻译成标准ASCII字符。也可以把这个字符串直接放到 img 标签 src 上。这样也可以节省 http网络的一次请求