黑马点评上线：保姆级教程（一）——项目前端上传服务器，载入Nginx容器历程
当前，前端开发和后端服务之间的交互，尤其是在文件上传方面，是开发者常常面临的挑战之一。今天，我们将通过一个简单的案例，教大家如何在前端实现文件上传，并在服务器上通过 Nginx 容器进行处理。
一、准备工作
首先，确保你已经安装了 Docker，并且能够使用 docker 命令。接着，我们需要准备一个前端项目。这里我们选择使用 Vue.js 来示范文件上传的过程。如果你还没有安装 Vue CLI，可以通过以下命令安装：
npm install -g @vue/cli
然后创建一个新的 Vue 项目：
vue create file-upload-demo
cd file-upload-demo
二、前端代码实现
在创建的 Vue 项目中，我们需要实现一个简单的文件上传功能。打开 src/components 目录，创建一个新的组件 FileUpload.vue。
<template>
<div>
<h1>文件上传</h1>
<input type="file" @change="onFileChange" />
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null,
};
},
methods: {
onFileChange(event) {
this.file = event.target.files[0];
},
async uploadFile() {
const formData = new FormData();
formData.append("file", this.file);
try {
const response = await fetch("http://localhost:8080/upload", {
method: "POST",
body: formData,
});
const result = await response.json();
console.log(result);
} catch (error) {
console.error("上传失败:", error);
}
},
},
};
</script>
此组件包含一个文件输入框和一个上传按钮，当用户选择文件并点击上传时，这个文件将被发送到指定的服务器地址（在本示例中为 http://localhost:8080/upload）。
三、后端服务器实现
为了处理文件上传，我们需要一个简单的后端服务器。这里我们使用 Node.js 和 Express 框架。首先安装所需的依赖：
npm init -y
npm install express multer cors
创建一个 server.js 文件，写入以下代码：
const express = require('express');
const multer = require('multer');
const cors = require('cors');
const path = require('path');
const app = express();
app.use(cors());
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
cb(null, Date.now() + path.extname(file.originalname)); // 为文件添加时间戳
},
});
const upload = multer({ storage: storage });
app.post('/upload', upload.single('file'), (req, res) => {
res.json({ message: '上传成功!', file: req.file });
});
app.listen(8080, () => {
console.log('服务器正在监听 8080 端口');
});
这段代码会创建一个 Express 服务器，能够处理文件上传的请求，并将文件存储到 uploads 目录下。
四、构建 Nginx 容器
以下是 Docker 和 Nginx 的配置步骤，以便我们能将上述应用服务化：
- 创建一个
Dockerfile文件：
FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD ["node", "server.js"]
- 创建
docker-compose.yml文件，配置 Nginx 代理：
version: '3'
services:
app:
build: .
ports:
- '8080:8080'
nginx:
image: nginx:alpine
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
ports:
- '80:80'
- 创建
nginx.conf文件，以反向代理到 Node.js 服务：
worker_processes 1;
events { worker_connections 1024; }
http {
server {
listen 80;
location /upload {
proxy_pass http://app:8080;
}
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
}
五、运行并测试
在项目根目录下执行以下命令来启动服务：
docker-compose up --build
现在，你可以在浏览器中访问 http://localhost 来测试文件上传功能，选择文件并点击上传，后端应该能成功接收到文件并返回成功信息。
总结
通过以上步骤，我们成功实现了前端文件上传功能，并通过 Nginx 容器来处理请求。这只是一个简单的示例，后续可以根据项目需求进行更多的自定义和优化。希望这个保姆级教程能帮助到你，开启更复杂项目的旅程！
