nodeJS+vue图片上传，更新头像

最新推荐文章于 2024-08-23 08:08:50 发布

姑老爷呀

最新推荐文章于 2024-08-23 08:08:50 发布

阅读量1.8k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/pfourfire/article/details/125160181

版权

本文介绍了如何使用Vue的el-upload组件结合NodeJS后端服务实现图片上传并更新头像的功能。前端通过指定上传地址，设置上传前的校验规则，成功后获取图片路径。后端利用formidable中间件解析图片，存储到静态资源目录，并返回图片路径给前端，同时将头像路径保存至用户信息中。

摘要由CSDN通过智能技术生成

思路：前端通过el-upload将图片传给后端服务，后端通过formidable中间件解析图片，生成图片到静态资源文件夹下（方便前端直接访问），并将图片路径返回给前端，前端拿到图片路径即可渲染头像。

1、前端准备

前端采用vue的el-upload组件，具体用法见官方API。使用代码如下

<!--头像上传-->
<el-upload
  class="avatar-uploader"
  action="http://localhost:3007/api/upload"
  :data= this.avatarForm
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="avatar-uploader-icon">点击修改头像</i>
</el-upload>