图片的上传
图片的上传一般我们是将图片上传到服务器,然后将文件静态托管,再返回图片的url,并不是将图片直接存为base64编码格式,这样我们的网页就不会太大,否则会加载很慢。
前端请求
用的Element的上传组件
<el-upload
:action="$http.defaults.baseURL + '/upload/card_img'"
list-type="picture-card"
:headers="getAuthHeaders()"
:on-success="afterUpload"
:on-remove="remove_img"
:limit="1"
>
<i class="el-icon-plus"></i>
</el-upload>
Element的上传组件用的是ajax
请求,所以我们的请求路径得用完整路径
请求时应该加上请求头,getAuthHeaders()会获得我存在session里面的token
后端接收
得用到一个上传中间件multer
,github:multer
// 引入上传插件multer
const multer = require('multer')
// 上传卡片图片
const card_img = multer({
dest: __dirname