最近有一個需求议街，就是需要制作一個頁面能將文件上傳到Linux里。
簡單分析
我這邊Linux是 win10的Linux子系統(tǒng)
后臺搭的是node后臺
前端是用的簡單的jq頁面忙灼，比較粗糙味咳，實現(xiàn)功能為主
當拿到這個需求的時候肮柜，我們拆分這個需求棍弄，發(fā)現(xiàn)我應(yīng)該做的幾步
- 需要寫一個NodeJs的后臺實現(xiàn)文件上傳望薄，一個前端頁面并能跑通這個后臺，上傳到某個文件夾里
- 需要把這套放到Linux上并跑通
那我們就先跑通win10上的上傳demo吧呼畸！
1. 搭建 node 后臺
這里展示一下主要代碼
- 這里用到的 multer 需要npm install multer 下載痕支，更加詳細的 multer 可以查看我最后提供的參考資料
/* --------------------上傳文件接口---------------------------- */
const multer = require('multer');
//設(shè)置跨域訪問
app.all('*', function(req, res, next) {
//設(shè)置允許跨域的域名，*代表允許任意域名跨域
res.header("Access-Control-Allow-Origin", "*");
//res.header("Access-Control-Allow-Credentials", "true");
//允許的header類型
res.header("Access-Control-Allow-Headers", "X-Requested-With");
//跨域允許的請求方式
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
let uploadFilePath = ''
const headerConfig = multer.diskStorage({
// destination 上傳目的地文件夾 （必需）
destination: (req, file, callback) => {
// uploadFilePath 為目錄絕對路徑(用戶選擇目錄的絕對路徑)
callback(null, uploadFilePath)
},
// 拿到所上傳文件的 filename處理蛮原，我是處理成原來的名稱（可以打印出 file 的各個屬性看看）
filename: (req, file, callback) => {
callback(null, file.originalname);
}
})
const upload = multer({
storage: headerConfig
})
// 上傳 單個文件接口
app.post('/uploads', upload.single('file'), (req, res) => {
res.send({"code": 1,});
})
// 上傳 文件夾接口
app.post('/uploadFolder', upload.array('file', null), (req, res) => {
res.send({"code": 1,});
})
2. Postman 測試接口
- 也可以直接寫前端頁面調(diào)用這個后臺接口卧须。但是我想先用 Postman 先測通這個 node 接口∪逶桑可以跑通的時候花嘶，表示我的后臺接口沒有出問題。再去實現(xiàn)前端頁面蹦漠，如果有什么問題就可以基本上鎖定是前端頁面的問題椭员。
- 一般測后臺接口的任務(wù)，后端會測好提供的接口都是沒有問題的津辩，但是我們一個人寫的話可能就會忽略這一步拆撼。
3. 前端頁面實現(xiàn)
- 下面是 html 的主要代碼
<!-- 這是單文件上傳與文件夾上傳的兩個按鈕 -->
<div style="margin-bottom: 10px;">
單文件上傳：<input type="file" id='file' name="file" />
<input type="button" value="單文件上傳" onclick="uploadPic()" />
</div>
<div>
文件夾上傳：<input type="file" id='fileFolder' name="file" webkitdirectory/>
<input type="button" value="文件夾上傳" onclick="uploadPic(1)" />
</div>
- 下面是 js 代碼
const uploadPic = (type) => {
let formData = new FormData();
let key = $('#file')[0].files
let url = 'http://127.0.0.1:3000/uploads'
if (type === 1) {
// 上傳文件夾
url = 'http://127.0.0.1:3000/uploadFolder'
key = $('#fileFolder')[0].files
}
// 當文件夾上傳時容劳，就把文件夾的文件依次添加進 formData
for (var i = 0; i < key.length; i++) {
formData.append('file', key[i]);
}
// 簡單寫個ajax 調(diào)用
$.ajax({
url: url,
data: formData,
type: 'post',
// 告訴jQuery不要去設(shè)置Content-Type請求頭
contentType: false,
// 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
processData: false,
crossDomain: true,
cache: false,
success: function(res) {
alert('上傳成功');
},
})
}
階段性成功
到這里喘沿，用node upload.js 開啟后臺，打開剛寫的html頁面竭贩，依次測試上傳文件蚜印。與上傳文件夾都成功了，我們的第一大步也就實現(xiàn)了留量。接下來只用把這個項目遷移進 Linux 就大功告成啦窄赋！
4.Linux 上相關(guān)環(huán)境搭建
這一步我之前寫過哟冬。Win10的Linux子系統(tǒng)中安裝node環(huán)境與Linux中npm失敗問題
5. 遷移上傳 demo 項目
- 我們的 node 后臺 upload.js 修改一下上傳目的地 destination 就可以直接放到 linux 里了
- 因為是 win10的linux子系統(tǒng)關(guān)系，win10上打開頁面忆绰，也是可以直接訪問到 Linux里的后臺浩峡，那我們前端頁面里 ajax的請求url 自然也需要更新。
- 我在Linux里 搭建了nginx這個靜態(tài)web服務(wù)器错敢，我 demo 中前端頁面是直接修改 nginx 的首頁翰灾，后臺頁面放到了 nginx首頁的路徑下。安裝好依賴啟動nginx就可以看到上傳頁面了稚茅，非常方便纸淮。
