最近有一个需求，就是需要制作一个页面能将文件上传到Linux里。
简单分析
我这边Linux是 win10的Linux子系统
后台搭的是node后台
前端是用的简单的jq页面，比较粗糙，实现功能为主
当拿到这个需求的时候，我们拆分这个需求，发现我应该做的几步
- 需要写一个NodeJs的后台实现文件上传，一个前端页面并能跑通这个后台，上传到某个文件夹里
- 需要把这套放到Linux上并跑通
那我们就先跑通win10上的上传demo吧！
1. 搭建 node 后台
这里展示一下主要代码
- 这里用到的 multer 需要npm install multer 下载，更加详细的 multer 可以查看我最后提供的参考资料
/* --------------------上传文件接口---------------------------- */
const multer = require('multer');
//设置跨域访问
app.all('*', function(req, res, next) {
//设置允许跨域的域名，*代表允许任意域名跨域
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 测试接口
- 也可以直接写前端页面调用这个后台接口。但是我想先用 Postman 先测通这个 node 接口。可以跑通的时候，表示我的后台接口没有出问题。再去实现前端页面，如果有什么问题就可以基本上锁定是前端页面的问题。
- 一般测后台接口的任务，后端会测好提供的接口都是没有问题的，但是我们一个人写的话可能就会忽略这一步。
3. 前端页面实现
- 下面是 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 调用
$.ajax({
url: url,
data: formData,
type: 'post',
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
// 告诉jQuery不要去处理发送的数据
processData: false,
crossDomain: true,
cache: false,
success: function(res) {
alert('上传成功');
},
})
}
阶段性成功
到这里，用node upload.js 开启后台，打开刚写的html页面，依次测试上传文件。与上传文件夹都成功了，我们的第一大步也就实现了。接下来只用把这个项目迁移进 Linux 就大功告成啦！
4.Linux 上相关环境搭建
这一步我之前写过。Win10的Linux子系统中安装node环境与Linux中npm失败问题
5. 迁移上传 demo 项目
- 我们的 node 后台 upload.js 修改一下上传目的地 destination 就可以直接放到 linux 里了
- 因为是 win10的linux子系统关系，win10上打开页面，也是可以直接访问到 Linux里的后台，那我们前端页面里 ajax的请求url 自然也需要更新。
- 我在Linux里 搭建了nginx这个静态web服务器，我 demo 中前端页面是直接修改 nginx 的首页，后台页面放到了 nginx首页的路径下。安装好依赖启动nginx就可以看到上传页面了，非常方便。
