• Egg如何实现文件上传

    文件上传是开发中不可避免的一项。那么在没有单独的资源服务器的时候，上传的文件可能要放在我们的项目文件夹服务器上，我们如何实现文件上传呢？

    首先不用想，我们需要一个测试页面。html用来上传文件。如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>图片上传title>
    8. head>
    9. <body>
    10.     <input type="file" id='upload' />
    11.     <script>
    12.       // 获取 input 标签的 dom
    13.       var input = document.getElementById('upload')
    14.       // 监听它的变化
    15.       input.addEventListener('change', function(e) {
    16.         // 获取到上传的 file 对象
    17.         var file = input.files[0]
    18.         // 声明 FormData 实例 formData
    19.         let formData = new FormData()
    20.         // 添加实例属性 file
    21.         formData.append('file', file)
    22.         console.log('formData', formData)
    23.         // 调用服务端上传接口。
    24.         fetch('http://localhost:7001/api/upload', {
    25.           method: 'POST',
    26.           body: formData
    27.         }).then(res => {
    28.           if(res.ok) {
    29.             console.log('success')
    30.             return res.json();
    31.           } else {
    32.             console.log('error')
    33.           }
    34.         }).then(res => {
    35.           console.log('res is', res);
    36.         })
    37.       })
    38.     script>
    39. body>
    40. html>

    其次我们需要安装 moment mkdirp 用来实现时间转换以及文件夹创建

    npm i moment mkdirp -S

    下来，我们就必须要考虑下上传文件的流程。

    1. 我们需要在前端调选择文件，调用接口并且将图片带上。

    2. 在服务端接收到发来的图片信息的时候，我们需要获取到图片内容。

    3. 在当前项目找个目录将图片放进去，一般都会放在 app/public/upload 下。

    4. 将获取到的图片内容放入到指定的目录下。

    5. 返回上传文件的地址。服务器地址 + 图片名称 + 后缀

    我们需要在服务端中确定文件的接收方式，这里我们采用file 模式。也就是文件接收模式

    前往config/config.default.js 配置文件的接收形式

    1. config.multipart = {
    2.     mode: 'file'
    3. }

    其中 multipart 的配置有许多，如 上传格式的定制，文件大小的限制等。

    详细的，大家可以在官网进行查询 文件上传 | Egg

    配置完成后。我们的开发流程如下：

    • 通过ctx.request.files的形式，获取到前端上传文件的文件资源。
    • 通过fs.readFileSync(file.filepath) 来读取文件内容。
    • 然后在全局配置公共资源文件存放位置。获取这个位置。
    1. // config.default.js
    2. ​
    3. const userConfig = {
    4.     // myAppName: 'egg',
    5.     uploadDir: 'app/public/upload',
    6.   };
    • 使用 this.config.uploadDir 获取位置目录
    • 将文件名加入到这个目录下获取最终生成的路径
    • 将文件写入到最终路径下
    • 上传成功。

    所以我们的代码就如下：

    新建controller/ upload.js

    1. const fs = require('fs') // 引入fs，node 自带的文件处理工具
    2. const moment = require('moment') // 引入moment 时间处理工具
    3. const mkdirp = require('mkdirp') // 引入文件夹处理工具
    4. const path = require('path') // 引入路径处理工具
    5. ​
    6. const Controller = require('egg').Controller; 
    7. ​
    8. class UploadController extends Controller {
    9.   async upload() {
    10.     const { ctx } = this
    11.     // 1 获取我们上传文件。 是一个数组，只有一个文件情况下，默认为数组中的下标0。
    12.     let file = ctx.request.files[0]
    13.   
    14.     // 2 声明存放资源的路径
    15.     let uploadDir = ''
    16.   
    17.     try {
    18.       // 3 读取文件内容
    19.       let f = fs.readFileSync(file.filepath)
    20.       // 4 获取当前日期
    21.       let day = moment(new Date()).format('YYYYMMDD')
    22.       // 5 生成文件最后要保存的路径地址
    23.       let dir = path.join(this.config.uploadDir, day);
    24. ​
    25.       await mkdirp(dir); // 6 这个方法是，如果 上述dir 路径存在，那就不创建，如果不存在则会创建这个对应目录文件夹
    26.       // 7 返回图片保存的完整路径
    27.       uploadDir = path.join(dir,file.filename);
    28.       // 8 将图片内容写入到文件夹下
    29.       fs.writeFileSync(uploadDir, f)
    30.     } finally {
    31.       // 清除临时文件
    32.       ctx.cleanupRequestFiles();
    33.     }
    34.   
    35.     ctx.body = {
    36.       code: 200,
    37.       msg: '上传成功',
    38.       data: uploadDir.replace(/app/, ''),// 删除 /app/ 这个目录
    39.     }
    40.   }
    41. }
    42. ​
    43. module.exports = UploadController;

    我们打开刚开始的上传文件html模板进行测试

    选择文件后

     

    我们使用服务器地址+ 返回的图片链接尝试访问

     

    访问成功。任务结束。

  • 相关阅读:
    重保特辑｜筑牢第一道防线，云防火墙攻防演练最佳实践
    软件设计模式系列之六——单例模式
    cmake cpack打包代码
    L. Lemper Cooking Competition(前缀和/逆序对/树状数组/归并排序)
    5、nerf++（pytorch）
    查询企业信息的四种方法
    C#WPF数据触发器实例
    香港电信级中立机房服务器租赁服务——跨境互联新篇章
    npm封装插件打包上传后图片资源错误
    本地开发好的 SAP UI5 应用部署到 ABAP 服务器时，中文字符变成乱码的原因分析和解决方案
  • 原文地址：https://blog.csdn.net/qq_31281245/article/details/127925008