圖片上傳之FileAPI與NodeJs

HTML5之fileAPI

---

HTML5之fileAPI使得我們處理圖片上傳更加簡單。

實例

html代碼

<div class="form-group">
     <label for="modal_inputFile" class="col-md-3 control-label label-font">位置圖:</label>
     <div class="col-md-9">
         <input type="text" readonly="" class="form-control" placeholder="點擊選擇文件">
         <input type="file" id="modal_inputFile">
         <img src="" class="img-responsive" id="modal-pre" alt="預覽區" style="max-height: 300px">
     </div>
</div>

效果:

這里我們可以通過$("#modal_inputFile")[0].files[0]來獲取到圖片的信息。

這里有name,size,type這幾個我們常用的屬性。

實現預覽

選擇好圖片后，我們都希望會有個預覽功能。這個html5也為我們想到了。

他提供了FileReader這個新的對象給我們。

FileReader該接口主要用來把文件讀入內存，並且讀取文件中的數據。

這樣我們就可以通過date url來實現預覽了。

var file = document.getElementById(modal_inputFile'').files[0];
    if (!file) {
	return false;
	}
    var reader = new FileReader();

    reader.readAsDataURL(file);
    reader.onload = function(e) {
	var ib_pre = document.getElementById('modal-pre');
	ib_pre.src = this.result;
}

這樣就實現了預覽。

我們再來查看下img的src。

<img src="data:image/png;base64,iVBORXXXXXXXXXXXXX....XXXXXXX" class="img-responsive" id="modal-pre" alt="預覽區" style="max-height: 300px">

src是base64編碼。

具體可見:HTML5權威指南--標簽新變化,文件API,拖放API(簡要學習筆記一)

與后台對接

---

既然前端使用文件API能滿足我們的需求，那我們接下來就需要上傳到服務端了。當仁不讓的就是NodeJs了。

前端請求

下面是前端發起請求的例子：

//圖片上傳
$('#preUpload').on('click', function(e) {
	var data = new FormData();
	var _files = $("#modal_inputFile")[0].files[0];
	var ect = ($("#modal_inputFile")[0].files[0]).name.split('.')[1];
	if(ect !== 'png'){
		alert('請上傳png圖片!')
		return;
	}
	data.append("modal_file", _files);
	$.ajax({
		type: 'post',
		dataType: 'json',
		url: window.stnt_hosts + 'thirdAdmanage/upload/modal',
		data: data,
		contentType: false,
		processData: false
	}).done(function(data, status) {
		console.log('上傳成功');
		
	}).fail(function(err) {
		console.log('上傳失敗');
	})
})		    

這里通過FormData來處理我們需要上傳的數據。

這里的data數據是一個序列過的對象。后台接受就行了。

后端處理

服務端我們使用node-formidable來處理圖片的保存等操作。

見代碼:

var formidable = require("formidable");
var form = new formidable.IncomingForm();

//臨時目錄
form.uploadDir = './upload/';


//預覽圖片上傳
router.post('/upload/modal', function(req, res, next) {
	form.parse(req, function(err, fields, files) {
		if (files.modal_file) {
			rename(files.modal_file.path, files.modal_file.name, 'preview')
			res.send({
				stats:'success',
				data:[]
			})
		}
	})
});

function rename(old, _new, code, bId) {
	var path = './upload/' + code + '/';
		fs.exists(path, function(exists) {
			if (!exists) {
				fs.mkdir(path)
				console.log('創建文件夾！')
			}
			fs.renameSync(old, path + _new, function(err) {
				if (err) {
					console.log(err);
					
					return;
				}
				console.log('上傳成功!')
			})
		})
}

這里使用fs.renameSync的原因是，我們里面設置的臨時目錄form.uploadDir是存在於內存中的數據，並不是真正的圖片。

類似這樣

我們需要通過fs的方法，將文件重新保存到我們需要的地方即可。這時候就是圖片了。

最后

---

這里的form.parse(req, function(err, fields, files)中的fields與files到底是什么對象，一定要自己調試着看。看完你就明白是什么了。

之前我不清楚的時候就是打開瀏覽器就搜索，結果可想而知很慘，幾乎全是錯的。

所以不清楚的話一定要去查github。

還有app.use(bodyParser.urlencoded({ extended: true }));的作用是用來解析我們通常的form表單提交的數據，也就是請求頭中包含這樣的信息： Content-Type: application/x-www-form-urlencoded

app.use(bodyParser.json())是用來解析json的。

具體關於bodyParser的見這位博友的文章bodyParser中間件的研究。