Deno上傳文件

Deno上傳文件

視頻講解 https://www.bilibili.com/video/BV1BT4y1E7Nh/?p=6

我們一起來完成以下步驟:

  1. 沿用之前的工程代碼
  2. 創建上傳頁面和響應的controller
  3. 添加上傳文件功能
  4. 測試

#controllers/controller.ts

const { cwd } = Deno;

class Controller {
    static async getData(ctx: any){
        //cwd獲取當前工程目錄 
        //注意 ' !== `
        ctx.render(`${cwd()}/views/index.ejs`,{
            title:"Testing",
            data:{name:"deepincoding"}
        }); 
    }
    static async uploadPage(ctx: any){
        ctx.render(`${cwd()}/views/upload-page.ejs`);
    }

    static async uploadAction(ctx: any){
        //我們這裏不返回頁面,而是返回上傳文件的信息
        ctx.response.body = ctx.uploadedFiles;
    }
    
}

export default Controller;

#routers/index.ts

import { Router } from "https://deno.land/x/oak/mod.ts";
import Controller from "../controllers/Controller.ts";
import { upload } from "https://deno.land/x/upload_middleware_for_oak_framework/mod.ts";


const router = new Router();

router.get("/",Controller.getData);

router.get("/uploadPage",Controller.uploadPage);

router.post("/uploadAction", upload('uploads', ['jpg','png'], 20000000, 10000000, true, false, true),Controller.uploadAction);

export default router;

#views/upload-page.ejs

<body>
<form id="yourFormId" enctype="multipart/form-data" action="/uploadAction" method="post">
    <input type="file" name="file1" multiple><br>
    <input type="submit" value="Submit">
  </form>
</body>  

#main.ts


import { Application } from "https://deno.land/x/oak/mod.ts"
import {viewEngine,engineFactory,adapterFactory} from "https://deno.land/x/view_engine/mod.ts";
import router from "./routers/index.ts";

const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();

const app = new Application();
app.use(viewEngine(oakAdapter,ejsEngine));
app.use(router.routes());
app.use(router.allowedMethods());

await app.listen({port: 8000 })

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章