Egg.js上传图片总结

使用form表单

1. 前端代码

<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>

2. 后端代码

'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.userId
        const 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发送请求

1. 前端代码

 图片上传：<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);
        });
    }

2. 后端代码

'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.userId
        const 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. 上传结果
   

需要注意的点

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

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

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

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

参考资料：

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