koa --- 使用koa-multer上傳文件+elementUI

核心代碼

const upload = require('koa-multer') ({dest: './public/images'});
router.post('/upload', upload.single('file'), ctx=>{console.log('file', ctx.req.file);console.log('body', ctx.req.body);ctx.body = '上傳成功';
})

目錄結構如下

在這里插入圖片描述

基本思路

  • 1.通過瀏覽器訪問url: http://localhost:3000/upload
  • 2.服務器(koa)監聽到對應的路由,調用路由處理函數
  • 3.使用nunjucks模板引擎進行渲染,并返回給瀏覽器
  • 4.瀏覽器渲染完畢后顯示出來.
  • 5.點擊上傳文件->上傳
  • 6.服務端監聽到上傳的POST請求,進行相應的處理并將處理結果返回給前端

總體代碼

  • /upload.js
const koa = require('koa');
const app = new koa();
const router = new require('koa-router')();
const multer = require('koa-multer');
const nunjucks = require('koa-nunjucks-2');
const path = require('path');
const fs = require('fs');// nunjucks的配置
app.use(nunjucks({ext: 'html',path: __dirname,nunjucksConfig: {trimBlocks: true}
}));// upload的配置
const upload = multer({dest: 'uploads/'
});const types = upload.single('avatar');
router.get('/upload', async (ctx, next) => {await ctx.render('upload')
})router.post('/profile', types, async  (ctx, next) => {const { originalname, path: out_path, mimetype} = ctx.req.file;let newName = out_path + path.parse(originalname).ext;let err = fs.renameSync(out_path, newName);let result;if(err){result = JSON.stringify(err);} else {result = `<h1>upload success</h1>`;}ctx.body = result;
});app.use(router.routes());app.listen(3000, async () => {console.log('Server is running at http://localhost:3000');
})
  • /upload.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><form method="post" action="/profile" enctype="multipart/form-data">選擇圖片: <input name="avatar" id="upfile" type="file" /><input type="submit" value="提交" /></form>
</body></html>

Element-ui組件(前端)文件上傳

<!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>

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

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

相關文章

[bzoj4003][JLOI2015]城池攻占_左偏樹

城池攻占 bzoj-4003 JLOI-2015 題目大意&#xff1a;一顆n個節點的有根數&#xff0c;m個有初始戰斗力的騎士都站在節點上。每一個節點有一個standard&#xff0c;如果這個騎士的戰斗力超過了這個門檻&#xff0c;他就會根據城池的獎勵增加自己的戰斗力。具體地&#xff1a;每一…

Java Web Servlet

Java Web Servlet Servlet是在服務器上運行的小程序。一個Servlet就是一個Java類&#xff0c;并且可以通過“請求-響應”編程模型來訪問的這個駐留在服務器內存里的Servlet程序。 Servlet可完成以下功能&#xff1a; 讀取客戶端&#xff08;瀏覽器&#xff09;發送的顯式的數…

第二篇 python基礎知識總結:數據、運算符

引子 我們跟任何人交流&#xff0c;說的每一句都是都一些文字組成&#xff0c;包含名詞、動詞、語句、標點符號等&#xff0c;組成我們說普通話構成的基本要素。同理我們學習python語言也要明白這些基本要素&#xff0c;也就是我們常說的基本語法&#xff0c;這是我們必須掌握的…

【BZOJ1797】[AHOI2009]最小割(網絡流)

【BZOJ1797】[AHOI2009]最小割&#xff08;網絡流&#xff09; 題面 BZOJ洛谷 題解 最小割的判定問題&#xff0c;這里就當做記結論吧。&#xff08;源自\(lun\)的課件&#xff09; 我們先跑一遍最小割&#xff0c;求出殘量網絡。然后把所有還有流量的邊拿出來跑\(Tarjan\)縮\(…

koa --- 使用Sequelize連接mysql

Sequelize介紹 為了快捷開發,社區出現了一系列的ORM(Object Relational Mapping)類庫ORM的字面意思為對象關系映射,它提供了概念性的、易于理解的模型化數據的方法。通過ORM,可以降低操作數據庫的成本。開發者不需要通過編寫SQL腳本來操作數據庫,直接通過訪問對象的方式來查詢…

Java Web Jsp

Java Web Jsp JSP全稱Java Server Pages&#xff0c;是一種動態網頁開發技術。它使用JSP標簽在HTML網頁中插入Java代碼。標簽通常以<%開頭以%>結束。 JSP是一種Java servlet&#xff0c;主要用于實現Java web應用程序的用戶界面部分。網頁開發者們通過結合HTML代碼、XHT…

Android gravity和layout_gravity的區別

一、gravity和layout_gravity相同處 兩者都是設置對齊方式的屬性。內部的屬性值相同。 根據英文意思也能理解其中的意思。如center_horizontal表示在水平方向上的位置為中間。 二、gravity和layout_gravity的不同處 gravity是設置自身內部元素的對齊方式。比如一個TextView&…

koa --- mongoose連接mongoDB

使用Mongoose對MongoDB進行操作 const mongoose require(mongoose); mongoose.connect(mongodb://localhost/test,{ })Mongoose中的Schema 定義Schema categorySchema const categorySchema new mongoose.Schema({name:String,description: String,createdAt:{type: Date,…

Java Web 請求轉發與請求重定向

Java Web 請求轉發與請求重定向 請求轉發 服務器行為&#xff0c;即用戶向服務器發送了一次http請求&#xff0c;該請求可能會經過多個信息資源處理以后菜返回給用戶&#xff0c;各個信息資源使用請求轉發機制互相轉發請求&#xff0c;但是用戶是感覺不到請求轉發的。通過req…

05.RDD詳解

05.Spark--RDD詳解 RDD詳解--groupByKey--reduceByKey [MapPartitionRDD單詞統計] 單詞統計 import org.apache.spark.{SparkConf,SparkContext} object WordCountScala{def main(args:Array[String]):Unit{//創建spark配置對象val confnew SparkConf()conf.setAppName("W…

Mininet

首先&#xff0c;我折騰了兩周多的東西終于弄出一點眉目了。 有以下幾個內容需要學習記憶一下。 1.虛擬機&#xff0c;弄不出來共享文件夾&#xff0c;就用U盤吧&#xff0c;賊快還不用安裝配置各種東西&#xff0c;virtualbox和VMware都支持。 2.ubantu安裝軟件中途失敗&#…

docker --- 使用docker-compose.yml生成redis,并連接redis-cli

docker.compose.yml 配置 version: 3.1 services:redis:image: redisports:- 6379:6379命令行:docker-compose up 查看: docker ps 進入redis-cli,輸入以下 docker exec -it 7dc0a redis-cli -h localhost -p 6379 操作Redis數據 設置 namemarron set name marron 獲取nam…

淺談javaweb三大框架和MVC設計模式

淺談javaweb三大框架和MVC設計模式轉載自&#xff1a;http://blog.csdn.net/sunpeng19960715/article/details/50890705 小序&#xff1a;博主以前在學javaweb的時候開始總不理解javaweb三大框架和MVC框架模式&#xff0c;雖然沒有把兩者混為一談&#xff0c;但是也是很暈菜。…

win下配置nginx

1.下載:http://nginx.org/en/download.html 2.在安裝目錄cmd: start nginx.exe 啟動nginx 3.修改默認運行端口80(nginx.conf): HTTP 數據分發 修改配置文件nginx.conf相應節點: 修改完后重啟服務: nginx -s reload TCP 數據分發: nginx 1.9以上版本支持tcp轉發 配置文件中增加:…

在springBoot中配置web.xml中配置的servlet

第一種 web.xml (截取的需要轉換的) 當攔截到 /socke t時執行該servlet <servlet><servlet-name>websocket</servlet-name><servlet-class>org.ldd.ssm.hangyu.socket.MyWebSocketServlet</servlet-class></servlet><servlet-mapping&g…

koa --- koa-bouncer驗證

使用 koa-bouncer中間件對傳入的數據進行驗證 const bouncer require(koa-bouncer); app.use(bouncer.middleware());const val async (ctx, next) > {ctx.validateBody(name).required(要求提供用戶名).isLength(6, 16, 用戶名長度應該為6~16).isString().trim()next();…

static關鍵字的作用

//C/C程序員面試指南 楊國祥等編著 定義全局靜態變量。全局靜態變量有以下特點&#xff1a; 在全局數據區分配內存&#xff1b;如果沒有初始化&#xff0c;其默認值為0&#xff1b;該變量在本文件內從定義開始到文件結束可見。定義局部靜態變量。局部靜態變量有以下特點&…

Redis 初次嘗試

Redis 初次嘗試 第一次接觸redis&#xff0c;也不知道要寫些什么。就玩了下將redis列表中的數據存入mysql數據庫中。 首先有三個文件&#xff1a; redis.php 添加數據進redis&#xff1b; insert_class.php 將數據插入數據庫&#xff1b; inert.php 調用insert_class.php;…

fiddler2抓包數據工具使用教程

一款免費且功能強大的數據包抓取軟件。它通過代理的方式獲取程序http通訊的數據&#xff0c;可以用其檢測網頁和服務器的交互情況&#xff0c;能夠記錄所有客戶端和服務器間的http請求&#xff0c;支持監視、設置斷點、甚至修改輸入輸出數據等功能。fiddler包含了一個強大的基于…

egg --- 初始化一個egg項目基本結構說明

Egg.js體驗 全局安裝 // 創建項目 $ npm i egg-init -g $ egg-init egg-example --typesimple $ cd egg-example $ npm i// 啟動項目 $ npm run dev $ open localhost:7000Egg.js的結構 路由(Router): 將請求URL和具體承擔執行動作的Controller的關系對應控制器(Controller)…