nodejs文件图片上传

56 阅读2分钟

// 配置路由表 设定的 请求路径是 /api/user/upload 设定一个 函数文件设定 upload.js 上传文件程序的执行

        设定一个 二级表文件 user.js 
            二级表文件中 导入 upload.js 
            二级表.post() 中 添加 /upload 路径对应执行的程序
            
        最终 输入请求地址是 /api/user/upload 
        会 将 upload.js 中设定的函数程序 导入 app.js 中触发执行 

// 前端部分 
    form标签中设定input标签 
        需要通过 new FormDate() 获取 form标签中 所有的标签存储的数据数值

        form标签 有默认事件执行效果 
            必须要阻止默认事件执行

        发送的ajax请求 
            虽然是post请求方式 
            虽然要传参图片数据
            // 但是 不要设定 请求头 

            xhr.send( form标签参数数据实例化对象 )
                程序执行会有报错 但是不影响文件上传操作

// 后端部分
    npm i multer 
        下载 multer 项目依赖包

    const multer = require('multer');
        导入依赖包

    const storageInfo = multer.diskStorage({
        有两个固定的键名键值 

        destination:( 参数1, 参数2, 参数3 ){
            上传文件 存储的文件夹路径设定

            参数1   请求相关数据
            参数2   上传文件相关数据集
            参数3   回调函数

            参数3( null , '上传文件文件夹相对路径' );
                目前 别的不用管 只需要通过参数3回调函数 设定 上传文件 存储的文件夹相对路径
                相对路径是从最终导入的文件开始设定的 
        
        },


        filename:( 参数1, 参数2, 参数3 )=>{
            上传文件 文件名称 扩展名 设定 

            参数1   请求相关数据
            参数2   上传文件相关数据
            参数3   回调函数

            参数2中存储 上传文件相关数据
                {
                    fieldname: 'file',
                        前端input>file标签 name属性的属性值

                    originalname: '2023-03-20_160000.png',
                        文件原始名称 
                        可以通过 文件的原始名 获取 文件的扩展名

                    encoding: '7bit',
                    mimetype: 'image/png'
                }

            通过 参数2 获取 文件原始的扩展名

            通过 js程序 设定一个随机文件夹 
                目前的方法是 时间戳 拼接 6位随机数

            参数3( null , 设定的文件名--随机文件夹 拼接 原始扩展名 );

        }

    });
        配置 上传文件接收器
        本质是 配置 上传文件的文件夹 配置 上传文件的文件名称

    const upload = multer({ storage: storageInfo });
        将 配置好的上传文件接收器 
        也就是 上传文件文件夹 和 上传文件名称 配置给 上传文件程序

    upload.single( '前端input标签name属性属性值' );
        使用 单位件 上传程序 完成单位件上传操作