前端到後端文件類型（以圖片舉例）處理流程

流程圖 — 後面再補出來

寫在前面，先貼上github demo源碼地址https://github.com/LaputaGit/...，這個demo主要將文件處理的簡單實例從前端到後端的流程交代了一遍，使用koa,js,pug，koa比express輕量不少，並且async用起來很友好，pug是一款很炫酷的後端模板引擎，你值得擁有，代碼裏面有註釋，理解起來很方便

一、前端處理文件上傳

1.一、調用API

前端上傳文件，能夠調用FormData()這個方法，詳情參考MDNhttps://developer.mozilla.org...

經過FormData對象能夠組裝一組用 XMLHttpRequest發送請求的鍵/值對。它能夠更靈活方便的發送表單數據，由於能夠獨立於表單使用。若是你把表單的編碼類型設置爲multipart/form-data ，則經過FormData傳輸的數據格式和表單經過submit() 方法傳輸的數據格式相同

就像這樣，一個基礎的文件上傳js代碼

document.querySelector('button').onclick = () => {
    const formData = new FormData()
      formData.append('uploadfile', document.querySelector('input').files[0])
      axios({
        url:'http://localhost:3003', // 此處填上服務器對應的地址（有路由把路由加上）
        method:'post',
        data:formData,
        headers: {'Content-Type': 'multipart/form-data'}  // 必定要設置請求頭類型爲'multipart/form-data'，不然nodejs會解析錯誤
      }).then(res => {
          console.log(res.data)
          // 在上傳圖片成功，而且後端保存圖片以後，再將圖片以url的方式返回給前端，這樣前端能夠直接使用
          document.querySelector('img').src = res.data.imageUrl
      })
}

MDN中有詳細基礎實例，這裏就不介紹了，也可參考我github demo中/public/index.js這個文件

二、後端處理文件

2.一、利用koa構建一個基本的後端服務用做測試

利用koa2 + pug 搭建了一個簡單的項目，用到了koa-views， koa-static， koa-body等關鍵中間件，涉及到一些跨域和路由的處理，以及文件API的調用，代碼裏面有詳細註釋

啓動

• node server.js
• 打開localhost:3003
• 上傳一張小圖片以後能夠在控制檯查看nodejs的打印信息，以及在chrome控制檯查看前端的請求和響應

server.js

const Koa = require('koa')
const app = new Koa() // 實例化Koa對象
const router = require('koa-router')() // 路由中間件
const cors = require('koa-cors')  // 處理cors跨域中間件
const fs = require('fs')  // 原生fs模塊
const path = require('path')  // 原生path模塊
const views = require('koa-views')  // 渲染模板引擎中間件 - 渲染pug

/**
 * 要對前端發來的'multipart/form-data'類型的文件進行解析，否則沒法獲得正確的解析結果
 * 而且設置文件保存路徑，文件到服務器以後，會解析以後會被保存到public文件夾下
 */
const koaBody = require('koa-body')({ 
    multipart: true,  // 容許解析'multipart/form-data'類型的文件
    formidable: {
        uploadDir: path.join(__dirname, 'public')  // 設置文件上傳保存路徑
    }
})

app.use(cors()) // 跨域中間件

// nodejs不像apache和php，它天生沒有web容器，因此須要中間件來提供
app.use(require('koa-static')('./public'))  // 提供靜態服務

// 設置模板引擎的路徑，而且告知類型爲pug模板
app.use(views(path.join(__dirname, './view'), { extension: 'pug' }))

// 請求根路由，返回首頁index.html
router.get('/', async (ctx) => {
    await ctx.render('index.pug')
})

// 處理前端post發送過來的數據
router.post('/', koaBody, async ( ctx ) => {
    console.log(ctx.request.body.files.uploadfile) // uploadfile爲前端發送過來的文件名

    // 拿到前端發送過來的文件名，而且對node保存的文件，改成和文件名一致
    let imageName = ctx.request.body.files.uploadfile.name
    fs.rename(ctx.request.body.files.uploadfile.path, path.join(__dirname, 'public/images/') + ctx.request.body.files.uploadfile.name, () => {
        console.log('圖片上傳ok')
    })

    ctx.set('Content-Type', 'image/png') // 設置返回給前端的類型
    // 返回給前端json數據
    ctx.body = {
        text: '圖片上傳成功',
        imageUrl: `http://localhost:3003/images/${imageName}` // imageUrl是利用靜態服務生成的圖片的地址，可直接在瀏覽器請求到這個圖片
    }
})

// 路由中間件使用
app
  .use(router.routes())
  .use(router.allowedMethods())

app.listen(3003)
console.log('[demo] start-quick is starting at port 3003')

index.pug

doctype html
html(lang="pug")
    head
        title="index"
        script(type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js")
        body
            div
                input(type="file" id="userfile")
                div
                    button 發送文件
                image(alt="圖片暫時爲空")
                script(src="index.js")
    body

2.三、文件的存放

後端在接收到前端上傳給服務器的資源後，通常會保存在服務器內存，或者是數據庫中，這中間涉及到的一些文件操做以及和數據庫的交互，在理解buffer和編碼格式的基礎後，理解起來就不費勁了

2.四、文件返回給前端

昨天跟公司的後端討論了一個需求：後端給前端返回json，前端負責將json渲染成pdf或者xls的格式，後面有時間我再把這部分實現出來放到github中，歡迎你們討論和star，若有理解不當，歡迎指正