koa --- 使用koa-multer和element-ui組件上傳頭像

文件上傳

前端代碼

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<div id="app"><el-uploadclass="avatar-uploader"action="http://localhost:3000/users/upload":show-file-list="false":on-success="handleUploadSuccess":before-upload="beforeUploadUpload"><img v-if="imageUrl" :src="imageUrl" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>
</div>
<script>var app = new Vue({el: "#app",data(){return :{imageUrl: ""};},methods: {handleUploadSuccess(res, file){this.$message.success("上傳頭像成功");this.imageUrl = URL.createObjectURL(file.raw);},beforeUploadUpload(file){const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 /1024 < 2;if(!isJPG) {this.$message.error("上傳頭像圖片只能是 JPG 格式!");}if(!isLt2M){this.$message.error("上傳頭像圖片大小不能超過 2MB!");}return isJPG && isLt2M;}}})
</script>

說明:

vscode使用alt+b打開html文件,使用的協議是file.
el-upload中的action屬性,是點擊后請求的路由連接,是http協議(后端需要設置跨域)
on-success: 成功后前端的回調
before-upload: 發出ajax請求前,進行校驗
this.$message: 是element-ui的消息函數.

const Koa = require("koa");
const app = new Koa();
const Router = require("koa-router");
const router = new Router({prefix,"/users"});
const cors = require("koa2-cors");const __ROOTDIR__ = "./public/images";
const upload = require("koa-multer")({dest: __ROOTDIR__});app.use(cors());router.post("/upload", upload.single("file"), ctx=>{ctx.body ="上傳成功"
})

說明:

__ROOTDIR__: 代表上傳的資源存儲的文件目錄
upload.single: 是koa-multer庫提供的一個函數,上傳一個文件

美化一下前端代碼:

upload.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>.avatar-uploader .el-upload{border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;}.avatar-uploader-icon{font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar{width: 178px;height: 178px;display: block;}</style><title>文件上傳</title>
</head>
<body><div id="app"><!-- ajax方式上傳--><el-uploadclass="avatar-uploader"action="http://localhost:3000/users/upload":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="imageUrl" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></div><script>var app = new Vue({el:"#app",data(){return {imageUrl:""};},methods: {handleAvatarSuccess(res, file){this.$message.success("上傳頭像成功");this.imageUrl = URL.createObjectURL(file.raw);},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if(!isJPG){this.$message.error("上傳頭像圖片只能是 JPG 格式!");}if(!isLt2M){this.$message.error("上傳頭像圖片大小不能超過 2MB!");}return isJPG && isLt2M;}},})</script>
</body>
</html>

啟動后端

nodemon user.js

在這里插入圖片描述

在Public/images下可以看見上傳的圖片

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250496.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250496.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250496.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！