koa 上传文件 简单处理 （上传、接收，保存）

前端文件上传（两种）

（一） element UI组件

<el-upload 
	class="avatar-uploader" 
	action="/api/image/upload" 
	multiple
	:show-file-list="true"
	:on-success="handleAvatarSuccess"
	:before-upload="beforeAvatarUpload">
		<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

注意：action部分中/api 为代理 用于解决跨域情况 也可以用一下写法

//html 部分
<el-upload
	class="avatar-uploader" 
	:http-request="fileChange"
	multiple
	:show-file-list="true"
	:on-success="handleAvatarSuccess"
	:before-upload="beforeAvatarUpload">
	<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
//js
fileChange(files) {
	console.log(files.file)
	let form = new FormData();
	form.append('file', files.file);
	//该方法为axios封装方法				
	imageUpload(form).then(res => {

	})				
}
//axios封装方法详细部分
import request from '../utills/axios.js'

export function imageUpload(file) {
  return request({  	
    url: '/image/upload',
    headers: {'Content-Type': 'multipart/form-data'},
    method: 'post',
    data:file
  })
}

（二） 原生

//html 部分
<input type="file" multiple="multiple" @change="fileChange" placeholder="上传文件">
//js
fileChange() {
				
				let fileList = event.target.files;			
				let file = fileList[0];
				let form = new FormData();
				form.append('file',file);				
				//你的post接口，formData方式发送
				imageUpload(form).then(res => {

				})
				
			}

后端文件配置

app.js文件中加入

const koaBody = require('koa-body');

app.use(koaBody({
	multipart: true,
	formidable: {
		//上传文件存储目录
		uploadDir:  path.join(__dirname, `/public/uploads/`),
		//允许保留后缀名
		keepExtensions: true,
		multipart: true,
	}
  })
)

路由文件部分

router.post('/upload', async (ctx, next) => {
	var str=ctx.request.files.file.path
	var pathArr=str.split("\\uploads\\")
	var basicUrl="http://localhost:3001/" //为基础路径
	console.log(pathArr)
	ctx.body = {
		// filename: ctx.request.files.file,
		path:basicUrl+'uploads/'+pathArr[1]
	}
})

在网上查阅资料，大部分处理图片文件使用的都是koa-multer
自己也有试着配置但是总是不生效仍在采坑中，具体配置如下
在utils目录下新建文件upload.js

const multer = require('koa-multer')

//配置
var storage = multer.diskStorage({
	
    destination: function (req, file, cb) {
        cb(null, 'public/uploads'); //配置图片上传的目录
    },
	filename: function (ctx,file,cb) {
		console.log('修改文件名')
		const filenameArr = file.originalname.split('.');
		cb(null,Date.now() + '.' + filenameArr[filenameArr.length-1]);
	}
})
console.log(storage)
//加载配置
var upload = multer({storage})

module.exports = upload

路由中使用

const koaRouter = require('koa-router');
const upload = require('../utils/upload')

router.post('/upload', upload.single('file'), async (ctx, next) => {
ctx.body = {
	filename: ctx.request.files.file,
} 
 })

app.js文件中加入

const koaBody = require('koa-body');

app.use(koaBody({
	multipart: true,	
  })
)

运行后能上传成功，也有返回值，但是却没有文件保存到本地目录 且upload.js路径引入正确，但打印修改文件名称打印不出来，欢迎了解的朋友解惑