本篇文章介绍如何使用
Vue和
Koa实现手动图片上传。
前置知识
-
Vue.js
-
Koa.js
- FormData
步骤
1. 创建
Vue项目
首先，我们需要创建一个
Vue项目。在终端中输入以下命令：
```
vue create
vue-
koa-upload
```
然后选择默认选项即可。
2. 安装
koa和
koa-router
在
Vue项目的根目录中打开终端，并输入以下命令：
```
npm install
koa koa-router
```
这将会安装
koa和
koa-router。
3. 创建
koa服务器
在根目录下创建一个server.js文件，并输入以下代码：
```
const
Koa = require('
koa');
const
koaBody = require('
koa-body');
const Router = require('
koa-router');
const app = new
Koa();
const router = new Router();
router.
post('/upload', async (ctx, next) => {
// TODO: 处理图片上传
});
app.use(
koaBody());
app.use(router.routes());
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
```
以上代码创建了一个
koa服务器，并添加了一个路由'/upload'。在该路由处理函数中，我们将在之后添加处理图片上传的代码。
4. 创建
Vue组件
在src/components目录下创建一个Upload.
vue文件，并输入以下代码：
```
<template>
<div>
<input type="file" ref="fileInput" @change="onFileChange" />
<button @click="upload">上传</button>
</div>
</template>
<script>
export default {
methods: {
onFileChange(event) {
const file = event.target.files[0];
this.file = file;
},
async upload() {
const formData = new FormData();
formData.append('file', this.file);
const response = await fetch('http://localhost:3000/upload', {
method: '
POST',
body: formData,
});
console.log(response);
},
},
};
</script>
```
以上代码创建了一个Upload组件，并添加了一个fileInput和一个上传按钮。在onFileChange方法中，我们将选中的文件赋值给file变量。在upload方法中，我们使用FormData将file变量打包，并使用fetch发送
POST请求到服务器的'/upload'路由。
5. 添加
Vue路由
在src/router/index.js文件中，输入以下代码：
```
import
Vue from '
vue';
import
VueRouter from '
vue-router';
import Upload from '../components/Upload.
vue';
Vue.use(
VueRouter);
const routes = [
{
path: '/',
name: 'Upload',
component: Upload,
},
];
const router = new
VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;
```
以上代码添加了一个Upload组件路由。
6. 运行项目
在终端中输入以下命令来运行
Vue项目和
koa服务器：
```
npm run serve
```
在另一个终端中输入以下命令来运行
koa服务器：
```
node server.js
```
然后在浏览器中访问http://localhost:8080/，就可以看到一个上传图片的页面。选择一张图片并点击上传按钮，就可以将图片上传到服务器。
7. 处理图片上传
在server.js文件中，添加以下代码：
```
const path = require('path');
const fs = require('fs');
router.
post('/upload', async (ctx, next) => {
const file = ctx.request.files.file;
const reader = fs.createReadStream(file.path);
const extname = path.extname(file.name);
const uploadPath = path.join(__dirname, '/uploads', `${Date.now()}${extname}`);
const stream = fs.createWriteStream(uploadPath);
reader.pipe(stream);
ctx.body = {
success: true,
message: '上传成功',
imageUrl: `http://localhost:3000/uploads/${path.basename(uploadPath)}`,
};
});
```
以上代码处理了图片上传。我们从
请求中获取到上传的文件，然后使用fs和path模块处理文件流和文件路径。最后，我们将上传的图片的URL返回给客户端。
通过以上步骤，我们成功地使用
Vue和
Koa实现了手动图片上传。
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
