前言

最近自己在做一个云蹦迪项目，其中有用到用户头像上传的功能。其中项目的架构为UmiJs+Egg。图片上传到Egg后端，再做OSS处理。做的时候遇到了一些问题，这里做个记录。大家可以先看下这篇文章UmiJs整合Egg，里面附带了源码，本篇文章将在其基础上写。

一. 项目编写

将源码down下来后，npm install下，运行npm run dev命令后，可以访问该路径：

http://127.0.0.1:4396/zong/

此时页面的效果如下：

那么我们开始整合文件上传：
1.修改前端页面src/pages/index.tsx文件：

import React, { useState } from 'react';
import { Row, Col, Upload, Button } from 'antd';
import 'antd/es/modal/style';
import request from '@/utils/axiosHelper';const UploadModal = () => {const [ fileList, setFileList ] = useState<any[]>([]);const onChange = ({ fileList }:any) => {setFileList(fileList);};const uploadAction = () => {// 利用FormData表单上传const formData = new FormData();const tmpFile = fileList?.[0];const file = tmpFile?.originFileObj;formData.append('files[]', file);request('/user', '/upload', formData).then((data:any) => {console.log(data);});};return <div><Row><Col span={20}><UploadmaxCount={1}onChange={onChange}fileList={fileList}accept={'.jpg,.png,.gif,.jpeg'}><Button>上传</Button></Upload></Col></Row><Row><Col offset={7}><Button type='primary' onClick={() => uploadAction()}>确认上传</Button></Col></Row></div>;
};export default UploadModal;

2.Egg的后端配置：config/config.default.ts文件，添加配置：

config.multipart = {mode: 'file',whitelist: [ '.jpg', '.jpeg', '.gif', '.png' ],fileSize: '10mb',fields: 10,// 允许上传的最大文件数files: 5,
};

3.路由添加app/router.ts:

router.post('/user/upload', controller.home.upload);

4.controller增加方法：

upload() {const { files } = this.ctx.request;const file = files?.[0];console.log('文件Get！！', file);
}

5.之后页面上选择个图片，然后点击上传，后端打印：

二. 注意事项

2.1 清理缓存

每次经过egg框架来上传文件的时候，都会在本地的某个目录下生成一个临时文件，因此最好在代码块中添加删除请求文件的执行语句，如：

async upload() {const { files } = this.ctx.request;try {const file = files?.[0];console.log('文件Get！！', file);} catch (error) {console.log(error);} finally {await this.ctx.cleanupRequestFiles();}
}

那么文件又存储与哪里呢？大家可以看到上述案例中的打印结果，有个filepath，那么我根据我自己机器中的路径去看看：可以发现，这里面有好多临时文件。

也因此，在实际的应用当中，请务必加入cleanupRequestFiles()这句话，他会在你处理完逻辑的时候，即本次请求结束的时候，将对应的请求文件删除。

2.2 antd的Upload组件得到的事件对象问题

注意，我们的项目代码是：

const uploadAction = () => {const formData = new FormData();const tmpFile = fileList?.[0];const file = tmpFile?.originFileObj;formData.append('files[]', file);request('/user', '/upload', formData).then((data:any) => {console.log(data);});
};

倘若改成：

const uploadAction = () => {const formData = new FormData();const tmpFile = fileList?.[0];const file = tmpFile;formData.append('files[]', file);request('/user', '/upload', formData).then((data:any) => {console.log(data);});
};

此时再进行文件的上传，我们看看是什么效果：

可见，我们并没有获取到files文件，这是为什么呢？我们debug看下：

我们发现，我们通过onChange事件获取到的fileList集合，里面的每个对象，他是一个object类型，而每个对象下面又有一个叫originFIleObj的属性，其类型才是File文件类型。

我们再看看请求体是咋样的：

可以发现，发送的是一个object对象，那么我们再把originFIleObj属性加回去，看看正常的请求：可以发现此时是个二进制流。

我们可以做出以下结论：

在使用Egg获取到上传的文件的时候。首先需要进行config配置。
其次前端使用FormData表单进行数据提交。
对于上传的文件类型，必须是File类型。

2.3 关于onChange事件的注意

这里我将antd官网上给出的解答贴出来，为了方便大家理解：

Egg整合antd文件上传以及防踩坑指南相关推荐

【SpringBoot】：springboot整合FTP文件上传与下载功能
导入依赖包 <dependency><groupId>commons-net</groupId><artifactId>commons-net</ ...
文件上传控件SWFUpload使用指南分享
SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大.以前在项目中用过几次,但它的配置参数太多了,用过后就忘记怎么用了,到以后要用时又得到官网上看它的文档,真是太烦了.所以 ...
android 字体文件压缩,Android 字体使用踩坑指南
Android 字体使用踩坑指南最近项目改版,根据ui的设计,需要使用到三字体.在使用过程中遇到一些坑,于是有了这个避坑指南! 字体压缩第一个坑!字体库的体积太大. 字体压缩的前提是要使用的内容是 ...
springboot文件上传服务器,SpringBoot: 浅谈文件上传和访问的坑 (MultiPartFile)
本次的项目环境为 SpringBoot 2.0.4, JDK8.0. 服务器环境为CentOS7.0, Nginx的忘了版本. 前言 SpringBoot使用MultiPartFile接收来自表单的f ...
Elsevier上传LaTeX 修改稿踩坑
背景千辛万苦修改完论文,结果发现要求上传可编辑文件,tex上传真的太难了,一堆坑,尤其是编译错误,要等系统创建pdf后才能找到.中间还打了北京的客服电话,结果他们那边并不懂相关的东西.说latex是 ...
Github 学生优惠包 -- 最新防踩坑指南
Github学生优惠包的申请最近越来越麻烦,里面有非常多的坑,留下此文防止各位申请的时候踩到. 此文面向中国大陆真正有学生身份的同学!!! 文章目录前言 1.用到的网址 2.申请所需 3.详细步骤 ...
lgg8各个版本_LG G8 展示机升级安卓10 防踩坑指南
先来对比下展示机版本信息是不是大体相同再下手关于手机中,无s/n,无IMEI 安卓9软件版本为G820UM10C,硬件版本1.0 被阉割功能:5G频段wifi,nfc,移动网络(无基带),高分屏,r ...
SpringMVC整合fastdfs-client-java实现web文件上传下载
为什么80%的码农都做不了架构师?>>> 版权声明:本文为博主原创文章,转载请标明出处(http://blog.csdn.net/wlwlwlwl015)Thanks. 目录( ...
【Spring】Spring MVC文件上传--整合bootstrap-fileinput和jQuery-File-Upload
前言这里分享两个使用Spring MVC进行文件上传的简单示例, 分别整合bootstrap-fileinput 和 Jquery File Upload , 代码十分简单, 都是入门的示例,因此这 ...

Egg整合antd文件上传以及防踩坑指南