Egg.js上传图片总结

使用form表单

前端代码

<form action="http://127.0.0.1:7001/headPicUpdate" method="post" encType="multipart/form-data"><input type="file" name="file" /><input type="submit" value="上传" />
</form>

后端代码

'use strict';
const Controller = require('egg').Controller;class userInfoUpdateController extends Controller {async headPicUpdate() {         // 修改用户头像const path = require('path')const fs = require('fs')const { ctx } = this;      let userId = this.ctx.request.body.userIdconst file = ctx.request.files[0]// 生成路径名const toFileName = '/public/upload/' + Date.now() + file.filename;const to = path.dirname(__dirname) + toFileName;// 拷贝图片至本地await fs.copyFileSync(file.filepath, to)// 返回前端路径const newUrl = "http://127.0.0.1:7001" + toFileName;// 存储到数据库const results = await this.app.mysql.query('update user set headPicPath = ? where userId = ?', [newUrl, userId]);ctx.body = {msg: '图片上传成功',url: newUrl}}
}module.exports = userInfoUpdateController;

3.上传结果

使用axios发送请求

前端代码

 图片上传：<input id="uploadFile" type="file" name="file" />上传按钮：<button type="submit" onClick={upload}>Upload</button>

// 上传头像方法const upload = () => {let file = document.querySelector('#uploadFile').files[0]let formData = new FormData()let userId = localStorage.getItem('userId')formData.append("uploadFile", file)formData.append("userId", userId)axios.post(servicePath.headPicUpdate, formData).then(function (response) {localStorage.setItem('headPicPath',response.data.url)navigate('/index/my/myDetail')console.log(response);}).catch(function (error) {console.log(error);});}

后端代码

'use strict';
const Controller = require('egg').Controller;class userInfoUpdateController extends Controller {async headPicUpdate() {         // 修改用户头像const path = require('path')const fs = require('fs')const { ctx } = this;      let userId = this.ctx.request.body.userIdconst file = ctx.request.files[0]// 生成路径名const toFileName = '/public/upload/' + Date.now() + file.filename;const to = path.dirname(__dirname) + toFileName;// 拷贝图片至本地await fs.copyFileSync(file.filepath, to)// 返回前端路径const newUrl = "http://127.0.0.1:7001" + toFileName;// 存储到数据库const results = await this.app.mysql.query('update user set headPicPath = ? where userId = ?', [newUrl, userId]);ctx.body = {msg: '图片上传成功',url: newUrl}}
}module.exports = userInfoUpdateController;

上传结果

需要注意的点

使用form表单的时候，input框要添加name属性，否则后端ctx.request.files[0]为空

 <input type="file" name="file" />

上传multipart/form-data格式的文件，后端在config\config.default.js文件添加如下配置

 config.multipart = {mode: 'file'};

参考资料：

1. egg.js文档
2. axios文档

Egg.js上传图片总结相关推荐

Egg.js上传图片到对象存储COS并按照日期存储图片
上传到COS上的参考文档可以参考官方的文档:https://cloud.tencent.com/document/product/436/8629#.E4.B8.8A.E4.BC.A0.E5.AF.B ...
原生 js 上传图片
js <!doctype html> <html> <head><meta charset="utf-8"><title> ...
egg.js连接mysql数据库遇到的问题
最近在策划写一个博客采用前后端分离模式,前端使用vue后端使用egg.js,我也是刚开始学习egg.js,所以会将自己踩的坑都记录下来. 首先介绍下后端为什么采用egg.js吧,之前我是学习了koa2 ...
本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
轻松搭建基于 Serverless 的 Egg.js Web 应用
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算准备计 ...
基于 Egg.js 框架的 Node.js 服务构建之用户管理设计
转载需经本人同意且标注本文原始地址:https://zhaomenghuan.github.io/blog/nodejs-eggjs-usersytem.html 前言近来公司需要构建一套 EMM( ...
egg.js java 生产数据_Egg 2.15.0 发布，阿里开源的企业级 Node.js 框架
值得注意的变化新特性 [EXPERIMENT FEATURE] 支持单线程模式 Bug 修复 [TYPE] 支持config.static.dir的数组 [TYPE] 修复中间件类型不兼容 [TYP ...
一个vue加egg.js的博客
之前自己的博客是用hexo做的,后面想做一个有后台的博客就打算用vue加node来试试,于是就有了这个博客. 项目地址 W-Blog W-Blog是一个基于vue和node的小小小博客前端用vue, ...
Serverless 实战 —— Serverless + Egg.js 后台管理系统实战
Serverless + Egg.js 后台管理系统实战作为一名前端开发者,在选择 Nodejs 后端服务框架时,第一时间会想到 Egg.js,不得不说 Egg.js 是一个非常优秀的企业级框架,它 ...
入门 | egg.js 入门之egg-jwt
小小继续学习,这次学习的内容是egg-jwt 相关. 创建egg项目这里创建一个egg新项目,这里使用的是ts模式. npm init egg --type=ts npm install 安装相关的 ...

Egg.js上传图片总结

使用form表单

使用axios发送请求

需要注意的点

参考资料：

Egg.js上传图片总结相关推荐

最新文章

热门文章