上传文件的四种方式

1 使用filereader对象，读取本地图片，将图片转化成base64传给服务器，读取时直接将服务器返回的内容贴在图片的src属性上

$('newsPpl_imgUpload_input').evt('change',function(e){
            var e=WT.e.fix(e),_e=e.t;
            $('newsPpl_upload_msg').h('请点击上传图片按钮');
            var file = _e.files[0];    
            if(!/image\/\w+/.test(file.type)){
                showTips('danger',file.name+"不是图像文件!");
            }else{
                var reader = new FileReader();
                reader.onload = function(e){
                    $('newsPpl_imgUpload_img').src = this.result;
                };
                reader.readAsDataURL(file);
            }
        });

 

缺点：只能上传像素比较小的图片（chrome测试当图片超过70kb多一些的时候图片不能正常显示）

2 还是通过filereader对象将文件的base64传给服务器，服务器接收文件后将文件写入特定位置，保存成功后返回特定值给前端，如果是图片可以将图片在服务的url返回。

3 使用比较古老的方式，通过表单提交来上传文件

3.1 写form表单，填写要提交的地址，将表单的target设置为一个隐藏的iframe中。当表单提交成功后，服务器会返回一些数据，显示在iframe中。

3.2 读取iframe中的内容，可能会存在跨域问题，解决跨域问题：服务器端需要301重定向，把内容传给前端一个blank页面，同时将一些信息作为blank的参数传给前端，具体做法如下：

//创建 form表单和iframe
<iframe id="newsFrameId" name="newsFrameName" class="dn" ></iframe>
<form id="newsPpl_upload" action="{{d.url}}/upload/info_pic?type=2" method="post" enctype ="multipart/form-data" target="newsFrameName"> 
   <input name="zc_uploadFile" id="newsPpl_imgUpload_input" class="pa h180 w200 bc_14 fl ml30"  multiple="multiple" type="file" style="right: 170px; top:25px; opacity: 0;" />                     
   <input id="newsSubmitBtn" type="submit" value="上传图片" class="btn line_c_1 ml10 mt150 xs"/>
   <div id="newsPpl_upload_msg" class="dib mt20 c_41 ml10"></div>
</form>

//在iframe的load事件中监听是否有新的元素传入
$('newsFrameId').evt('load',function(){
   pic_Url = WT.url + WT.url2Obj($('newsFrameId').contentWindow.document.location.href).a;
   $('newsPpl_upload_msg').h('图片上传成功');
});

//服务器端上传图片通用接口 
app.post('/upload/info_pic', function*() {
    let type = this.query.type;
    let file = this.body.files.zc_uploadFile;
    this.url = this.url.split('?')[0];
    try {
      let folder = '';
      switch(parseInt(type)){
        case 1:
          folder = 'info_pic';
          break;
        case 2:
          folder = 'news_check';
          break;
        default:
          this.throwCode(400, zc_api_collection.upload[this.url].err_code['400']);
          return;
      }
      let salt = $.tools.uuid(32);
      new Promise((resolve) => { 
        fs
          .createReadStream(file.path)
          .pipe(fs.createWriteStream(path.join(__dirname, `/../static/${folder}/${salt}.jpg`)))
          .on('finish', function() {
              //Promise 不能用yield
              if(parseInt(type) == 1){
                mysql.query(`INSERT INTO zc_img (img_name) VALUES ('/${folder}/${salt}.jpg');`);
              }
          });
      });
      this.type = 'html';
      this.body = ``;
      this.set('Location', `blank.html`);
      let Origin = this.get('Origin');
      this.redirect(Origin + `/zc_mc/blank.html?a=/${folder}/${salt}.jpg`);//重定向并指定参数
      this.status = 301;
    } catch (e) {
      this.throwCode(500, e.toString());
    }
  });

4 使用XHR上传文件（没用过呢），通过ajax方式传文件就很方便了

HTML5提出了XMLHttpRequest对象的第二版，从此ajax能够上传文件了。这是真正的"异步上传"，是将来的主流。上一节的iframe上传，可以用作老式浏览器的替代方案。

ajax上传代码，放在表单的submit事件回调函数中：

　　form.on('submit',function() {

　　　　// 此处进行ajax上传

　　});

我们主要用的是FormData对象，它能够构建类似表单的键值对。

　　// 检查是否支持FormData
　　if(window.FormData) {　

　　　　var formData = new FormData();

　　　　// 建立一个upload表单项，值为上传的文件
　　　　formData.append('upload', document.getElementById('upload').files[0]);

　　　　var xhr = new XMLHttpRequest();

　　　　xhr.open('POST', $(this).attr('action'));

　　　　// 定义上传完成后的回调函数
　　　　xhr.onload = function () {

　　　　　　if (xhr.status === 200) {

　　　　　　　　console.log('上传成功');

　　　　　　} else {

　　　　　　　　console.log('出错了');

　　　　　　}

　　　　};

　　　　xhr.send(formData);

　　}