文章已同步至掘金：https://juejin.cn/post/6844903927398285319
欢迎访问😃，有任何问题都可留言评论哦~

Koa2中可以使用koa-multer模块实现图片的上传等工作

使用步骤：

1.安装Koa2的koa-multer

npm install --save multer
或者
npm i multer

2.引入并配置koa-multer模块

const multer = require('koa-multer');
//配置    
let storage = multer.diskStorage({
    //文件保存路径
    destination: function (req, file, cb) {
        cb(null, 'public/uploads/')  //注意路径必须存在
    },
    //修改文件名称
    filename: function (req, file, cb) {
        let fileFormat = (file.originalname).split(".");
        cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
    }
})

//加载配置
let upload = multer({ storage: storage })

3.使用koa-multer

在前端form表单上加上 enctype="multipart/form-data"

<form action="" method="post"  enctype="multipart/form-data">
    <input type="file" id="file" name="pic" />
</form>

在后端接收上传的内容

//注：pic是从前端输入框的name属性里获取的
router.post('/doAdd', upload.single('pic'), async (ctx, next) => {
    ctx.body = {
        filename: ctx.req.file.filename,//返回文件名
        body:ctx.req.body
    }
});

注意事项：

• 在后端接收时必须用 post 接收
  例如：router.post("/doAdd", upload.single('pic'), async (ctx)=>{})

• 后端需要创建一个文件夹，用来保存前端上传的文件

• 在前端form表单上必须要加 enctype="multipart/form-data"

---

enctype解释

enctype就是encodetype的意思，它规定了form表单在发送到服务器时候的编码方式，有如下的三个值：

• application/x-www-form-urlencoded。默认的编码方式。但是在用文本的传输和MP3等大型文件的时候，使用这种编码就显得效率低下。(不是不能上传文件，是只能上传文本格式的文件)

• multipart/form-data 。 指定传输数据为二进制类型，比如图片、mp3、文件。

• text/plain。纯文体的传输。空格转换为 “+” 加号，但不对特殊字符编码。

选择完照片后立即显示

一般我们在 input 标签上选择完照片后，它不会立即渲染出来，只会显示一个文件名

那么如果我们想选择后让它立即显示出来该怎么做呢？

在input标签上加上一个onchange方法(如果改变则立即调用这个方法)，然后在input标签后面加上一个img标签

如下：

<div>
     <input type="file" id="file" onchange="uploadImg(this)" name="pic"/>
     <img src="" id="viewImg" alt="">
</div>

然后在当前页添加JS代码：

如下：

<script>
	function uploadImg(fileDom) {
		// 获取图片数据对象
		let file = fileDom.files[0];
		let reader = new FileReader();
		reader.readAsDataURL(file);

		//确保文件成功获取，base64数据量比较大
		reader.onload = function (event) {
			let e = event || window.event
			let img = document.getElementById("viewImg");
			img.src = e.target.result;
			img.style = "width: 120px;height:80px;float:left; border: 1px solid rgb(140, 238, 241);display: block"
		}
	}
</script>

这样就可以在选择完照片后立即显示出来了，当然可以自己在里面添加一些样式

---

^_<