背景
因为项目需求，需要使用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 方法在跨域请求（CORS）中的应用
- Setting progress handler on config for an upload causes OPTIONS preflight to be executed
这个是浏览器自动触发的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
差距还是很大的-_-||
网友评论