背景

因为项目需求，需要使用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. 学习记录：《C++设计模式——李建忠主讲》7.“领域规则”模式

    领域规则模式:在特定领域中,某些变化虽然频繁,但可以抽象为某种规则.这时候,结合特定的领域,将问题抽象为语法规则,从而给出该领域下的一般性解决方案. 典型模式:解释器模式(Interpreter). ...

  2. JVM(四) 垃圾回收

    1. 堆内存结构 Java堆从GC的角度可以细分为:新生代(Eden区.From Survivor区和To Survivor区)和老年代. 1.1 新生代 新生代是用来存放新生的对象.一般占据堆的1/ ...

  3. qt qml Treeview使用记录--设置每个Item的图片logo,高度

    这篇帮助很大: https://blog.csdn.net/qq_32116695/article/details/81298585, 代码如下: TreeView { id: viewTree an ...

  4. Git服务器搭建--ssh/http

    测试环境 Windows 7 Ultimate, 64-bit 6.1.7601, Service Pack 1(实体机,虚拟机VMware的宿主机) VMware® Workstation 7.1. ...

  5. golang使用一个二叉树来实现一个插入排序

    思路不太好理解,请用断点 package main import "fmt" type tree struct { value int left, right *tree } fu ...

  6. 00 Python的变量

    变量分类 a.全局变量:在模块内.在所有函数外面.在class外面,这就是全局变量. b.局部变量:在函数内.在class的方法(构造.类方法.静态方法.实例方法)内(变量未加self修饰),这就是局 ...

  7. 杭电1081 第二道 dfs题

    Problem Description 呃......变形课上Harry碰到了一点小麻烦,因为他并不像Hermione那样能够记住所有的咒语而随意的将一个棒球变成刺猬什么的,但是他发现了变形咒语的一个 ...

  8. 既有设计模式的lambda重构

    设计模式的博客要有模式的定义,UML类图,代码实现和模式的优缺点, 策略模式 工厂模式 模版方法 观察者模式 责任链模式 1 策略模式:定义了一组算法,并将每一个算法封装起来,使它们每一个之间可以相互 ...

  9. javascript 之 扩展对象 jQuery.extend

    在JQuery的API手册中,extend方法挂载在JQuery 和 JQuery.fn两个不同的对象上,但在JQuery内部代码实现的是相同的,只是功能各不相同. 官方解释: jQuery.exte ...

  10. java.lang.NoClassDefFoundError: org/springframework/core/env/EnvironmentCapa

    java.lang.NoClassDefFoundError: org/springframework/core/env/EnvironmentCapa 少导入包!spring-core-*.jar ...