Day18-1-文件上传

文件上传

一 文件上传

(1)下载插件

npm i multer

(2)在utils文件夹创建handleFile.js

// 文件上传 npm i multer
const multer = require('multer');
const fs = require('fs');
const path = require('path');

/**
 * 文件上传
 * 参数说明：接收一个 options 对象作为参数，该对象包含三个属性
 * - path：图片上传路径
 * - key：与前端 formData 对象的 fieldname 相匹配（即 formData.append()方法的第一个参数）
 * - size: 设置图片最大限制，单位 kb
 */
function uploadFiles(options = {}) {
    // 1. 对参数 options 进行解构并设置默认值
    const { dir = "./public/images", key = "file", size = 1000 } = options;
    // 2. 设置 multer 的参数，配置 diskStorage，来控制文件存储的位置以及文件名字等
    const storage = multer.diskStorage({
        // 2.1 确定图片存储的位置
        destination: function (req, file, cb) {
            // 当 dir 所对应目录不存在时，则自动创建该文件
            try {
                fs.accessSync(dir);
            } catch (error) {
                fs.mkdirSync(dir);
            }
            cb(null, dir);
        },
        // 2.2 确定图片存储时的名字。（注意：如果使用原名，可能会造成再次上传同一张图片的时候的冲突）
        filename: function (req, file, cb) {
            var changedName = new Date().getTime() + parseInt(Math.random() * 100) + path.extname(file.originalname);
            // var changedName = new Date().getTime() + '-' + file.originalname;
            cb(null, changedName);
        }
    });
    // 3. 配置图片限制
    const limits = {
        // 限制文件大小 1000 kb
        fileSize: 1024 * size,
        // 限制文件数量
        files: 10
    };
    // 4.生成的专门处理上传的一个工具，可以传入 storage、limits 等配置
    const upload = multer({ storage, limits });
    // 5. 返回多文件上传的设置信息（同样可用于单文件上传）
    return upload.array(key);
}

module.exports = {
    uploadFiles
}

(3)设计一个文件上传Controller

const {uploadFiles} =require("../utils/handleFile")

class UploadFileController{

    /**
     * 文件上传
     */
    async upFile(request,response){
        //上传文件
        const uploadImage = await  uploadFiles()
        //上传结果
        uploadImage(request,response,(error)=>{
            if(error){
                response.send({code:500,msg:"上传失败"})
            }else{
                response.send({code:200,msg:"上传成功",data:request.files[0].filename})
            }
        })
    }

}

module.exports = new UploadFileController()

(4)路由

var express = require('express');
var router = express.Router();

const uploadFileController = require("../controller/UploadFileController")
/**
 * 文件上传必须是post请求
 */
router.post("/upFile",uploadFileController.upFile)

module.exports = router;

文件上传必须使用post请求

(5)在app.js中配置路由

(6)使用apifox发送请求

图片会上传到 public ->temp目录下

二 前端访问静态资源

1 配置jwt的白名单,放行public请求

2 在app.js中做如下配置

//指定项目中public为静态资源 ，这个文件夹里面资源前端可以直接访问
app.use('/public',express.static(path.join(__dirname, 'public')))

3 在浏览器访问

http://127.0.0.1:3001/public/images/1686883340506.png