背景

因为项目需求,需要使用360的evpp库,来实现一个接口,支持文件上传。

实际操作过程中,发现了一些问题,记录下来。

前端文件上传方式

  • 简单的使用input标签
<body>
<form action="http://xxx/AI/sysBackstage/fileUpload" method="post" enctype="multipart/form-data">
<input type="file" name="fileUpload" />
<input type="submit" value="upload" />
</form>
</body>

如果前端直接使用这样的上传方法,则evpp的实现会比较简单,直接注册一个handler即可,但是这样实现上传进度等功能比较麻烦,所以最终没有选择这种方法

  • 使用XMLHttpRequest
    这个是H5里新增的东西,用法就不说了,网上很多
    前端大致的代码如下
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var xhr;
//上传文件方法
function UploadFile() {
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var url = "http://xxx:9009/file_upload"; // 接收上传文件的后台地址 var form = new FormData(); // FormData 对象
form.append("mf", fileObj); // 文件对象 xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("POST", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
xhr.upload.addEventListener("progress", updateProgress, false);
xhr.upload.addEventListener("load", uploadComplete, false);
xhr.send(form); //开始上传,发送form数据
}
//上传进度实现方法,上传过程中会频繁调用该方法
function updateProgress(evt) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
function uploadComplete(evt) {
console.log("上传成功!");
}
</script>
</head>
<body>
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UploadFile()" value="上传" />
</body>
</html>

最终前端的同学使用的就是这种方式

遇到的问题

关于跨域

主要是要在evpp注册的handler里调用类似于如下的代码

ctx->AddResponseHeader("Access-Control-Allow-Origin", "*");

或者只想对某一个地址开放权限

ctx->AddResponseHeader("Access-Control-Allow-Origin", "http://xxxx:8080");

关于OPTIONS预请求

实际操作过程中发现,如果前端注册了upload的progress消息,则在POST消息之前,会先发一个OPTIONS请求。
这里还要注意下面两个的区别,参考:Using_XMLHttpRequest

xhr.addEventListener("progress", updateProgress);         //下载进度(不会导致OPTIONS请求)
xhr.upload.addEventListener("progress", updateProgress); //上传进度(会导致OPTIONS请求)

详细讨论参考

这个是浏览器自动触发的OPTIONS请求,前端的同学好像并不能避免该请求。
这时会导致下面的错误

1.html:23 OPTIONS http://xxxx:9009/file_upload 501 (Not Implemented)

错误很明显,我们用evpp写的服务器不支持OPTIONS请求

问题原因

因为evpp是通过libevent实现的,google一遍之后,发现是libevent默认拒绝了OPTIONS请求,参考:Requests with OPTIONS type being rejected by libevent

解决办法

  • 对于evpp的修改
    参考上面的说明,主要是要调用evhttp_set_allowed_methods()函数来支持OPTIONS请求。但在evpp注册接口的地方已经无法获取到evhttp结构体了。所以我们最终采取的方案,是在evpp/http/service.cc文件的Service构造函数中加上
evhttp_set_allowed_methods(evhttp_, EVHTTP_REQ_GET | EVHTTP_REQ_POST | EVHTTP_REQ_OPTIONS);
  • 对于注册接口的修改
    因为OPTIONS和POST请求会访问同一个接口,所以接口代码要做相应的调整,大致如下
void FileUploadHandler(evpp::EventLoop* loop,
const evpp::http::ContextPtr& ctx,
const evpp::http::HTTPSendResponseCallback& cb) {
auto type = ctx->req()->type;
if(type == EVHTTP_REQ_OPTIONS)
{
ctx->AddResponseHeader("Access-Control-Allow-Method", "POST");
ctx->AddResponseHeader("Access-Control-Allow-Origin", "*");
ctx->set_response_http_code(204);
cb("options success");
}
else if(type == EVHTTP_REQ_POST)
{
ctx->AddResponseHeader("Access-Control-Allow-Origin", "*");
FormatBody(ctx->body().ToString());
cb("post success");
}

关于收到请求,如何保存文件

其实,一直对于文件上传是的过程是不太了解,感觉这篇文章讲的还比较清楚:http:文件上传背后发生了什么?'

在收到POST请求之后,body的格式大致如下(以chrome为例,其他浏览器类似)

------WebKitFormBoundaryJ4NgI6NUdHc020aI
Content-Disposition: form-data; name="fileUpload"; filename="1234.txt"
Content-Type: text/plain 1234567890
------WebKitFormBoundaryJ4NgI6NUdHc020aI--

总而言之,就是在文件内容之外,还有boundary等其他信息,需要把文件内容部分“摘”出来
我的实现

void SaveFile(const std::string &file_path, const std::string &file_content)
{
std::ifstream infile(file_path);
if(infile)
{
infile.close();
LOG(WARNING)<< "file : " << file_path << " already exist";
return;
}
infile.close(); std::ofstream outfile;
outfile.open(file_path);
if(outfile.is_open())
{
outfile<< file_content;
LOG(INFO)<< "Save file " << file_path << " success";
}
else
LOG(WARNING)<< "Save file " << file_path << " fail";
outfile.close();
} void FormatBody(const std::string &body)
{
LOG(INFO)<< body;
//g++4.8 do not support regex very well, so we can not use it.
std::string file_name_pat = "filename=\"";
size_t start_pos = body.find(file_name_pat);
if(start_pos == std::string::npos)
{
LOG(WARNING)<< "Cannot find 'filename' key in body";
return;
}
//start_pos is the pos of 'f', so we should add to the character after '"'
start_pos += file_name_pat.size(); size_t end_pos = body.find("\"", start_pos);
if(end_pos == std::string::npos)
{
LOG(WARNING)<< "Do not have '\"' in the end of filename";
return;
}
std::string file_name = body.substr(start_pos, end_pos - start_pos);
LOG(INFO)<< "filename : " << file_name; std::string content_type_pat = "Content-Type:";
start_pos = body.find("\r\n", end_pos + content_type_pat.size());
if(start_pos == std::string::npos)
{
LOG(WARNING)<< "Find character after Content-Type fail";
return;
}
//skip the next empty row '\r\n', so there is two of '\r\n'
start_pos += 4; end_pos = body.rfind("\r\n---");
if(end_pos == std::string::npos && end_pos > start_pos)
{
LOG(WARNING)<< "Find last '---' fail";
return;
}
std::string file_content = body.substr(start_pos, end_pos - start_pos);
LOG(INFO)<< "file content : " << file_content; std::string file_path = "/tmp/" + file_name;
SaveFile(file_path, file_content);
}

参考别人用c做的库:multipart_parser.c
差距还是很大的-_-||

链接:https://www.jianshu.com/p/4df54889cc8e
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

evpp 上传文件问题转的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

  3. asp.net mvc 上传文件

    转至:http://www.cnblogs.com/fonour/p/ajaxFileUpload.html 0.下载 http://files.cnblogs.com/files/fonour/aj ...

  4. app端上传文件至服务器后台,web端上传文件存储到服务器

    1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...

  5. .net FTP上传文件

    FTP上传文件代码实现: private void UploadFileByWebClient() { WebClient webClient = new WebClient(); webClient ...

  6. 通过cmd完成FTP上传文件操作

    一直使用 FileZilla 这个工具进行相关的 FTP 操作,而在某一次版本升级之后,发现不太好用了,连接老是掉,再后来完全连接不上去. 改用了一段时间的 Web 版的 FTP 工具,后来那个页面也 ...

  7. 前端之web上传文件的方式

    前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...

  8. Django session cookie 上传文件、详解

    session 在这里先说session 配置URL from django.conf.urls import patterns, include, url from django.contrib i ...

  9. 4 django系列之HTML通过form标签来同时提交表单内容与上传文件

    preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...

随机推荐

  1. mysql开启缓存、设置缓存大小、缓存过期机制

    目录 一.开启缓存 1.修改配置文件my.ini 2.命令方式 二.查看是否生效 1.query_cache_type 使用查询缓存的方式 2.have_query_cache 设置查询缓存是否可用 ...

  2. Apache POI操作pptx基本使用

    最近有一个ppt操作的需求,因此查了下相关的资料 ppt分类 (1)2007版之前的 是基于二进制的文件格式 细节没有完全公开,第三方厂商多是用单向工程方法猜测和分析出来的.WPS做得好一些,但开源的 ...

  3. sql 表的连接与查找

    A.left outer join: 左外连接(左连接):结果集几包括连接表的匹配行,也包括左连接表的所有行. SQL: select a.a, a.b, a.c, b.c, b.d, b.f fro ...

  4. todo---java中的json探讨

    1.json的命名格式 2.json赋值原则 3.json常用的工具 4.json的处理的第三方软件比较 5.json的起源 6.关于json串的对于null ,"" 的不同的第三 ...

  5. Android持久化存储——(包含操作SQLite数据库)

    <第一行代码>读书手札 你可能会遇到的问题:解决File Explorer 中无显示问题 Android中,持久化存储,常见的一共有三种方法实现 (一.)利用文件存储 文件存储是Andro ...

  6. Git时间 —— 初始版本控制工具

    <第一行代码>读书手札 可能你早就听闻git,奈何看不懂命令吓退了. 今天逆流而上. (1.)安装Git 登录官网,下载最新版,一路下一步.就完成安装了. (2.)创建本地代码仓库 首先配 ...

  7. jquery根据html()的内容来选择

    <ul><li>First</li><li>http://www.hfxskyyj.com/</li></ul> 如上,如何选中 ...

  8. 使用scrapy框架做赶集网爬虫

    使用scrapy框架做赶集网爬虫 一.安装 首先scrapy的安装之前需要安装这个模块:wheel.lxml.Twisted.pywin32,最后在安装scrapy pip install wheel ...

  9. Django框架下报的版本问题

    报错环境 python=3.6.5,django=2.2,PyMySQL=0.9.3 …… django.core.exceptions.ImproperlyConfigured: mysqlclie ...

  10. vm虚拟机啊安装操作

    VMware下载与安装一.虚拟机的下载1.进入VMware官网,点击左侧导航栏中的下载,再点击图中标记的Workstation Pro,如下图所示. 2.根据操作系统选择合适的产品,在这里以Windo ...