vue 增加上傳多圖的DEMO
阿新 • • 發佈:2019-01-02
安裝multer模組
單圖上傳
npm install multer
引用模組
它是依賴於express的一個模組
//引用express並配置 var express = require("express"); var app = express(); app.listen(3000);
var multer = require('multer'); /*var upload = multer({ //如果用這種方法上傳,要手動新增文明名字尾 //如果用下面配置的程式碼,則可以省略這一句dest: 'uploads/' })*/
配置
設定儲存檔案的地方,並根據上傳的檔名對應檔案新增字尾 可以通過filename
屬性定製檔案儲存的格式
屬性值 | 用途 |
---|---|
destination |
設定資源的儲存路徑。注意,如果沒有這個配置項,預設會儲存在/tmp/uploads 下。此外,路徑需要自己建立 |
filename |
設定資源儲存在本地的檔名 |
var storage =multer.diskStorage({ //設定上傳後文件路徑,uploads資料夾會自動建立。 destination: function(req, file, cb) { cb(null, './uploads') }, //給上傳檔案重新命名,獲取新增字尾名 filename: function(req, file, cb) { var fileFormat = (file.originalname).split("."); //給圖片加上時間戳格式防止重名名 //比如把 abc.jpg圖片切割為陣列[abc,jpg],然後用陣列長度-1來獲取字尾名 cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]); } }); var upload = multer({ storage: storage });
接受檔案
upload.single('xxx')
,xxx與表單中的name屬性的值對應 這裡雖然用到post請求,但實際上不需要bodyParser
模組處理
app.post('/upload-single', upload.single('logo'), function(req, res, next) { console.log(req.file) console.log('檔案型別:%s', req.file.mimetype); console.log('原始檔名:%s', req.file.originalname); console.log((req.file.originalname).split(".")) console.log('檔案大小:%s', req.file.size); console.log('檔案儲存路徑:%s', req.file.path); res.send({ ret_code: '0' }); });
多圖上傳
多圖上傳只要更改一下地方,前端往file輸入框加多一個multiple="multiple"
屬性值,此時就可以在選圖的時候多選了,當然也可以並列多個file輸入框(不推薦多個上傳圖片輸入框),這樣體驗會不好
<input type="file" name="logo" multiple="multiple" />
後端也需要相應的改變
app.post('/upload-single', upload.single('logo'), function(req, res, next) { //upload.single('logo')變為upload.array('logo', 2),數字代表可以接受多少張圖片 app.post('/upload-single', upload.array('logo', 2), function(req, res, next) {
如果不想有圖片數量上傳限制,我們可以用upload.any()
方法
app.post('/upload-single', upload.any(), function(req, res, next) { res.append("Access-Control-Allow-Origin","*"); res.send({ wscats_code: '0' }); });
前端部分
formData表單提交
<form action="http://localhost:3000/upload-single" method="post" enctype="multipart/form-data"> <h2>單圖上傳</h2> <input type="file" name="logo"> <input type="submit" value="提交"> </form>
formData表單+ajax提交
<form id="uploadForm"> <p>指定檔名: <input type="text" name="filename" value="" /></p> <p>上傳檔案: <input type="file" name="logo" /></ p> <input type="button" value="上傳" onclick="doUpload()" /> </form>
FormData
物件,是可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XMLHttpRequest
傳送這個"表單"
注意點
- processData設定為false。因為data值是FormData物件,不需要對資料做處理。
<form>
標籤新增enctype="multipart/form-data"
屬性。- cache設定為false,上傳檔案不需要快取。
- contentType設定為false。因為是由
<form>
表單構造的FormData物件,且已經聲明瞭屬性enctype="multipart/form-data"
,所以這裡設定為false
上傳後,伺服器端程式碼需要使用從查詢引數名為logo獲取檔案輸入流物件,因為<input>
中宣告的是name="logo"
function doUpload() { $.ajax({ url: 'http://localhost:3000/upload-single', type: 'POST', cache: false, //不必須 data: new FormData($('#uploadForm')[0]), processData: false,//必須 contentType: false,//必須 success: function(data) { console.log(data) } }) }