node.js 实现文件上传

html模块

单文件上传

使用form表单上传 必须是post请求
文件上传需要设置表单类型 enctype=“multipart/form-data”
```html

<form action="/upload/single" method="post" enctype="multipart/form-data">
    <!-- accept 属性是指定文件选择类型  name属性的值 要对应后端的save函数参数 -->
 	<input type="file" accept="image/*,.txt" name="myFile"><br>
 	<input type="text" name="myFile"  placeholder="文件描述"><br>
    <button>单文件上传</button>
</form>

```

多文件上传

<form action="/upload/array" method="post" enctype="multipart/form-data">
      <input type="file" accept="image/*,.txt" name="myFile"  multiple><br>
    <input type="text" name="myFile"  placeholder="文件描述" ><br>
    <button>单文件上传</button>
</form>

js模块

1. 导入模块

var express =require("express")
var app = express()
var bodyParser=require("body-parser")
app.use(express.static("public"))
app.use(bodyParser.urlencoded({extended:false}))
// multer 是一个硬盘存储模块 用于处理保存客户端上传的文件
var multer = require("multer")
 // multer 是一个硬盘存储模块 用于处理保存客户端上传的文件
var multer = require("multer")

设置服务器端口

app.listen(5000,function(){
    console.log("服务器已启动");
})

2. 配置硬盘存储信息 包括存储的位置 和存储文件名

// 返回一个硬盘存储对象
var myStorage = multer.diskStorage({
    // 设置文件存储的目标位置
    destination(req,file,callback){
        // req 请求对象
        // file 上传的文件信息 不是文件本身
        console.log(file);
        // 设置完成的回调函数 需要手动调用确认完成
        callback(null,"./public/file")  // null 表示错误信息为空   "./public/file"  存储位置
    },

    // 设置 文件存储的名称
    filename(req,file,callback){
        callback(null,file.originalname);  //originalname: 上传的文件名
    }
})

3. 创建一个硬盘存储函数 参数是一个对象 Storage 表示存储配置信息对象

var save = multer({storage:myStorage});

4.在请求接口处 存储上传的文件 文件上传必须是post请求

单文件上传

app.post("/upload/single",save.single("myFile"),function(req,res){
    // save 函数会自动把文件保存到硬盘 而非文件数据 依然在req.body里面
    console.log(req.body);
    res.send("文件已上传")
})

多文件上传

app.post("/upload/array",save.array("myFile"),function(req,res){
    // save函数会自动把文件保存到硬盘 而非文件数据 依然在req.body里面
    console.log(req.body);
    res.send("文件已上传")

})
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值