前端到后端文件类型（以图片举例）处理流程

编程知识更新时间:2023-04-03 21:46:25

~~流程图 — 后面再补出来~~

写在前面，先贴上github demo源码地址https://github/LaputaGit/...，这个demo主要将文件处理的简单实例从前端到后端的流程交代了一遍，使用koa,js,pug，koa比express轻量很多，而且async用起来很友好，pug是一款很炫酷的后端模板引擎，你值得拥有，代码里面有注释，理解起来很方便

1、前端处理文件上传

1.1、调用API

前端上传文件，可以调用FormData()这个方法，详情参考MDNhttps://developer.mozilla...

通过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、后端处理文件

2.1、利用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/ajax/libs/axios/0.17.1/axios.js")
        body
            div
                input(type="file" id="userfile")
                div
                    button 发送文件
                image(alt="图片暂时为空")
                script(src="index.js")
    body