七牛云实现表单上传

柔情只为你懂 2021-09-16 15:22 454阅读 0赞

表单上传适用于文件内容可以在一次 HTTP 请求即可传递完成的场景。该功能非常适合在浏览器中使用 HTML 表单上传资源，或者在不需要处理复杂情况的客户端开发中使用。如果文件较大（大于 1GB），或者网络环境较差，可能会导致 HTTP 连接超时而上传失败。若发生这种情况，您需要考虑换用更安全的[分片上传][Link 1]功能。

开发者只要组装一个符合 HTML 文件上传表单规范（参考[RFC1867][]）的 HTTP 请求，并以 POST 方式向域名 upload.qiniu.com 发起这个请求，即可将指定文件上传到服务端。详细使用方法请参考[表单上传 API][API]。

# **使用方法** #

我们可以用如下的 HTML 表单来描述表单上传的基本用法：

<form method="post" action="http://upload.qiniup.com/"
     enctype="multipart/form-data">
      <input name="key" type="hidden" value="<resource_key>">
      <input name="x:<custom_name>" type="hidden" value="<custom_value>">
      <input name="token" type="hidden" value="<upload_token>">
      <input name="crc32" type="hidden" />
      <input name="accept" type="hidden" />
      <input name="file" type="file" />
      <input type="submit" value="上传文件" />
    </form>

关键参数说明：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>action</td> 
   <td>string</td> 
   <td>是</td> 
   <td>上传地址，可参考<a href="https://developer.qiniu.com/kodo/manual/1671/region-endpoint" rel="nofollow">存储区域</a></td> 
  </tr> 
  <tr> 
   <td>resource_key</td> 
   <td>string</td> 
   <td>否</td> 
   <td>资源名，必须是 UTF-8 编码。<strong>注意：</strong>&nbsp;如果<a href="https://developer.qiniu.com/kodo/manual/upload-token" rel="nofollow">上传凭证</a>中 scope 指定为 &lt;bucket&gt;:&lt;key&gt;， 则该字段也必须指定。</td> 
  </tr> 
  <tr> 
   <td>custom_name</td> 
   <td>string</td> 
   <td>否</td> 
   <td><a href="https://developer.qiniu.com/kodo/manual/vars#xvar" rel="nofollow">自定义变量</a>的名字，不限个数。</td> 
  </tr> 
  <tr> 
   <td>custom_value</td> 
   <td>string</td> 
   <td>否</td> 
   <td><a href="https://developer.qiniu.com/kodo/manual/vars#xvar" rel="nofollow">自定义变量</a>的值。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>upload_token</td> 
   <td>string</td> 
   <td>是</td> 
   <td>必须是一个符合相应规格的<a href="https://developer.qiniu.com/kodo/manual/upload-token" rel="nofollow">上传凭证</a>，否则会返回 401 表示权限认证失败。</td> 
  </tr> 
  <tr> 
   <td>crc32</td> 
   <td>string</td> 
   <td>否</td> 
   <td>上传内容的 crc32 校验码。如填入，则七牛服务器会使用此值进行内容检验。</td> 
  </tr> 
  <tr> 
   <td>accept</td> 
   <td>string</td> 
   <td>否</td> 
   <td>当 HTTP 请求指定 accept 头部时，七牛会返回 content-type 头部的值。该值用于兼容低版本 IE 浏览器行为。低版本 IE 浏览器在表单上传时，返回 application/json 表示下载，返回 text/plain 才会显示返回内容。</td> 
  </tr> 
  <tr> 
   <td>file</td> 
   <td>file</td> 
   <td>是</td> 
   <td>文件本身。</td> 
  </tr> 
 </tbody> 
</table>

提交示例如下：

<!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8">
       <title>表单小图片上传</title>
       <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    
       <script>
               var imgurl = "";
                function getPhoto(node) {
                    var imgURL = "";
                    try{
                        var file = null;
                        if(node.files && node.files[0] ){
                            file = node.files[0];
                        }else if(node.files && node.files.item(0)) {
                            file = node.files.item(0);
                        }
                        //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
                        try{
                            imgURL =  file.getAsDataURL();
                        }catch(e){
                            imgRUL = window.URL.createObjectURL(file);
                        }
                    }catch(e){
                        if (node.files && node.files[0]) {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                imgURL = e.target.result;
                            };
                            reader.readAsDataURL(node.files[0]);
                        }
                    }
                    creatImg(imgRUL,file.name);
                    return imgURL;
                }
    
                function creatImg(imgRUL,fileName){
                    console.log(fileName);
                    $("input[name=key]").val(fileName);
                    var textHtml = "<img src='"+imgRUL+"'width='40px' height='40px'/>";
                    $("span").html(textHtml);
                }
    
                function upload(){
                    document.getElementById('form1').submit();
                }
    
        </script>
    </head>
    <body>
    
        <form id="form1" method="post" action="http://upload-z1.qiniup.com/"
          enctype="multipart/form-data">
          <input name="key"  value="" type="hidden"/>
          <input name="token"  value="bSF1IPT5YKp729o4ietO-M-ONzNcW90snELGm3sv:iPtb7rdYOHLb7Gjsz_ifjeu_t_4=:eyJzY29wZSI6Im91dHNvdXJjZSIsImRlYWRsaW5lIjoxNTM4MDM4NzU0fQ==" type="hidden"/>
          <input id="input-file" name="file" class="upload" type="file" value="" onchange="getPhoto(this)">
          <input type="button" value="上传" onclick="upload()">
        </form>
        <br/>
        <span> </span>
    
    </body>
    
    </html>

参考信息：[https://developer.qiniu.com/kodo/manual/1272/form-upload][https_developer.qiniu.com_kodo_manual_1272_form-upload]

[Link 1]: https://developer.qiniu.com/kodo/manual/chunked-upload
[RFC1867]: http://www.ietf.org/rfc/rfc1867.txt
[API]: https://developer.qiniu.com/kodo/api/upload
[https_developer.qiniu.com_kodo_manual_1272_form-upload]: https://developer.qiniu.com/kodo/manual/1272/form-upload