使用 iframe 七牛 Flask 处理文件异步上传

0x0 背景

使用 iframe 上传是很传统的异步上传的方式。我之前从来没有用过。
最近遇到一个问题是，有用户抱怨说图片上传不了。当然我测试是没有问题的。
之前的代码是同事基于七牛的异步上传示例的代码修改而来的，我接着用了。
由于上传跟后台交互并不多，用户也没有提供更多的信息。为了快速简单的解决这个问题，我干脆使用比较传统的上传方式算了。

0x1 基于 iframe 的异步上传

我们知道如果直接提交一个表单，当请求结果返回的时候，当前页面的内容会被响应内容替换掉。
简单来说，就是页面刷新了。
我们希望对此进行改进，希望上传操作在后台进行，然后上传完成之后通知我们。

基于 iframe 的异步上传，我认为关键在于设置 target 属性，
将 <form> 的请求响应结果显示到指定的 <iframe> 中。

查看 <form> 中 target 属性的文档有如下说明：

A name or keyword indicating where to display the response that is received after submitting the form.
iframename: The response is displayed in a named <iframe>.

我们可以通过设置 <form>的 target 属性。将其提交结果显示到指定的 iframe中。而不会刷新当前页面。
也就给我们感觉是在后台进行。（当然 target 属性还有更多其他属性，特别是在 HTML 5 中。）

上面解决了后台上传的问题，另一个问题就是上传完成的通知了。
我们什么时候获得上传完成的响应结果？
一般的做法是，上传完成之后，响应的内容返回一段 JS ，然后其中的 JS 回调指定的处理函数。

于是得到如下相关前端代码

<form method="post"  id="tr-upload-form" action="/awards/api/upload_file" enctype="multipart/form-data" target='tr_upload_frame'>
                <input type="file" name="file" accept="image/jpeg,image/gif,image/png" class="form-control">
                <input type="submit"  class="btn btn-primary form-control" value='上传'>
            </form>
            <iframe style="display:none" name="tr_upload_frame"></iframe>

下面的处理表单提交的 JS ，当用户点击上传时，动态替换 <form> 的 action 属性，加上回调参数。

var $_tr_upload_form = $('#tr-upload-form');
    $_tr_upload_form.on('submit',function(){
        var seed = Math.floor(Math.random() * 1000);
        var callback = 'upload_cb_'+seed;
        var url =  "/awards/api/upload_file";
        $_tr_upload_form.attr('action', url+'?callback='+callback);
        window[callback] = function(data){
            console.log('received callback:',data);
            $_tr_upload_form.attr('action',url);
            delete window[callback];
            if(data.ok){
                form.avatar = data.key;
                alert("上传成功")
            }else{
                alert("上传失败");
            }
        };
    });

0x3 后台上传代码

后台处理上传，我是用 Flask 和七牛 Python-SDK-6
Flask 的 file 属性的 FileStorage 的 stream 实例可以直接用于上传这点很方便。
响应的结果就是一段带 JS 回调代码的脚本。

@app.route('/api/upload_file',methods=['POST'])
def api_upload_file():
    from qiniu.io import  PutExtra,put
    import uuid

    callback = request.args.get('callback')
    file = request.files['file']
    uptoken = _create_uptoken()
    key = uuid.uuid4().hex
    extra = PutExtra()
    extra.mime_type = file.mimetype
    ret,err = put(uptoken,key,file.stream,extra)
    ok = True
    if err is not None:
        logger.error("uploa_file error "+str(err))
        ok = False
    data = { "key":key, "ok":ok }
    text =  '''
    <script>
        window.top.window['{callback}']({data});
    </script>
    '''.format(callback=callback,data=json.dumps(data))
    return text

使用 iframe 七牛 Flask 处理文件异步上传

0x0 背景

0x1 基于 iframe 的异步上传

0x3 后台上传代码

参考