方式一
以流的形式上传图片直接返回路径,这样写:
好处:方便处理存取数据返回路径
不好的地方:可能冗余,上传的文件后面并未使用
1.用koa-body中间件
注:如果已经使用了koa-bodyParser中间件,请remove此中间件,koa-body可以代替koa-bodyParser
在app.js中使用该中间件
const koaBody = require(‘koa-body‘)
app.use(koaBody({
multipart: true
}));
注:由于图片上传文本类型为:multipart/form-data,所以需加上此条件
2.前端代码调用
注:我用的vue+antd vue写的前端,其余框架同理
3.后端node实现
var upload_img = async (ctx, next) => {
// 上传单个文件
console.log(ctx.request.files.uploadImg, ‘==========================‘)
const file = ctx.request.files.uploadImg // 获取上传文件
// 创建可读流
const reader = fs.createReadStream(file.path);
let filePath = path.join(__dirname, ‘../public/upload/‘) + `${file.name}`;
// let filePath = `${__dirname}/public/upload/${file.name}`
console.log(22,filePath);
// 创建可写流
const upStream = fs.createWriteStream(filePath);
// 可读流通过管道写入可写流
reader.pipe(upStream);
return ctx.body = {
code:200,
data:{
path:filePath,
name:file.name
},
message:"上传成功!"
} ;
};
注:ctx.request.files.uploadImg,由于前端的upload组件name为uploadImg,所以这里写uploadImg
方式二