formData實現圖片上傳

前言

　　在 上一篇 已經實現了圖片預覽，那麼如何上傳圖片呢？有兩種思路：

　　一、將圖片轉化爲dataURL(base64)，這樣就成爲了一串字符串，再傳到服務端。不過這樣缺點不少，數據量比轉換以前增長1/3，並且會增長了存儲開銷（若是存在數據庫，就多了訪問數據庫；若是解析成圖片再存儲，就多瞭解析的開銷）。因此這樣方式不可取。

　　二、使用formData對象進行上傳。

FormData對象

　　先看MDN上對FormData對象的介紹：XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,咱們能夠經過JavaScript用一些鍵值對來模擬一系列表單控件,咱們還可使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優勢就是咱們能夠異步上傳一個二進制文件 。

　　構造formData

//1
var formData = new FormData(formDOM);


//2
var formData = new FormData();
formData.append(name , value , fileName)

　　在上篇的例子中，建立input的formData對象

var fileInput = document.querySelector('.input-file');
var files = fileInput.files

var formData = new FormData(); //建立formData對象

//判斷數據 如有 則添加數據
if(files.length > 0){
  [].slice.call(files).forEach(function(value,index){
    formData.append('img' + index,value,value.name) //遍歷添加數據
  })
}else {
  alert('請先選擇圖片');
  return false;
}

　　注意：查看formData對象數據須要用get()或者getAll()方法，直接打印出來是{}的。

　　弄好了formData對象，再XMLHttpRequest提交到服務端，這裏先寫一個最簡單的上傳圖片的接口。node小白，請不要吐槽這個粗糙到極致的接口，只是爲了測試上傳而已。

formidable = require('formidable'); //載入formidable
var express = require('express');
var app = express();

app.use(express.static('src',{   // 靜態資源中間件
  setHeaders : function(res,path,stat){
    res.setHeader('Cache-Control', 'max-age=' + 6000);
  }
}));

app.post('/upload',function(req,res){
  var form = new formidable.IncomingForm();
  form.encoding = 'utf-8';
  form.uploadDir = './src/images';
  form.keepExtensions = true;

  form.parse(req,function(err,field,files){
    console.log(files);
  });
  res.send({
    'msg':'upload file'
  });
});

var server = app.listen(8081, function(){
  console.log('服務器已啓動!');
});

上傳

　一、原生上傳

　　此時的 Content-Type應該爲multipart/form-data，原生方式的時候不須要添加也能夠，瀏覽器會自動完成。

      var httpDemo = new XMLHttpRequest(); //建立httprequest對象
      
      httpDemo.open('post','/upload',true); //初始化請求  post方式  接口  異步
      httpDemo.onload = function(e){
        console.log(e);
      }
      
      httpDemo.send(formData);  //發送請求

　　查看效果，選擇的圖片已成功上傳到指定的目錄。

 

　二、$.ajax()

　使用jquery上傳有兩個配置須要注意：

　　processData會默認將data轉化爲字符串，因此須要配置爲false，不進行處理。

　　contentType默認值爲application/x-www-form-urlencoded; charset=UTF-8'。上傳文件時，Content-Type應該爲multipart/form-data。可是設置爲multipart/form-data也仍是會失敗。只有設置爲false才能夠。

$.ajax({
url : '/upload',
type:'POST',
data: formData,
processData:false, contentType:false,
success:function(data,textStatus,jqXHR){

},
error:function(jqXHR,textStatus,error){

}
})

　　查看效果，依舊能夠上傳成功。

 

　三、vue-axios上傳

　　只須要配置header便可。

        headers: {
          'Content-Type': 'multipart/form-data'
        },