这个还是需要再开一篇文章好好说一下。
首先用户注册的时候,点击上传将图片上传到后端headImg文件夹下,并赋予一个唯一名称,后端返回这个唯一名称,前端保存这个名称至变量imgurl;
点击提交,前端检验是否所有检验规则都符合(重点是imgurl是否存在),符合则将用户信息全部提交至后台,写入数据库,这时用户信息和这个唯一的图片名称就绑定了;
之后用户进行登录操作,点击登录,后台验证是否存在此用户,存在则返回用户信息。这里注意的是用户的头像如何传给前端,我们传的是图片的名称,也就是用户数据库名下相对应的那个图片名。那么前端如何进行渲染呢?头像img的url地址就是后端地址加上图片名,那么首先我们就需要把后端headImg这个文件夹暴露出来,使得我们可以直接通过localhost:3000/xxxx.jpg访问图片,只需要在后端app.js这个文件里写
app.use(express.static(path.join(__dirname, ‘headImg’)));
即可,这样我们就可以直接通过localhost:3000/xxxx.jpg来访问图片了!也就可以直接在前端渲染这张图片。
那么七牛这种东西是怎么工作的呢?七牛的工作就相当于我们headImg这个文件夹所做的工作,当要存储的图片非常多的时候,我们就需要将它们存在七牛云上,post到七牛的地址,七牛返回图片的外链,我们直接渲染外链就能得到这张图。
至此图片上传并前端渲染逻辑结束。