目 录CONTENT

文章目录

Koa2中上传图片模块koa-multer的使用(可立即加载照片)

俊阳IT知识库
2023-02-14 / 2 评论 / 0 点赞 / 1,089 阅读 / 797 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金: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>

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


^_<

0

评论区