multer和formdata的踩坑

Posted 2021-03-26 shaolingyun

闲的无聊发现以前没玩过上传文件的功能，所以打算试一试

首先百度了准备了一哈知识，用到了input的file，FormData,node的中间件multer和express；

首先简单写了两html

<button id="sub" onclick="subbtn(this)">submit</button>

<input type="file" name="" id="file">

 

 然后就是Ajax获取文件了，使用的是FormData,

let formData = new FormData();

通过formdata的append添加文件，这里是key-value形式的，就是

formData.append(‘file‘,fil.files[0]);的形式，第一个是名称，自己随便取，第二个是获取的变量，可以通过获取inout的id，然后用files获取文件，files好像是一个数组或者集合形式，这里懒得去看了所以可以遍历获取或者通过下标获取想要的

因为我写的是post，所以这里就是用ajax的post方法去传文件，但是这里需要注意的是，不要写setRequestHeader，在这里我卡了好久，一直显示获取的是underfind,其他都是正常了

然后是node这边了，npm安装一哈express和multer，反正就是npm i express multer了，这里可以去github上看一下multer，有中文介绍版

首先引入const multer = require(‘multer‘);

然后文档上说

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, ‘/tmp/my-uploads‘)
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + ‘-‘ + Date.now())
  }
})

var upload = multer({ storage: storage })

destination是设置文件上传存储位置，

filename是这是文件名的
然后做了点修改，如果不变的话，

file.fieldname会是file-sdhfhsdfkjhsdkf一堆什么的，并且没有扩展名
所以将filename做了修改为

filename: function (req, file, cb) {

      cb(null, file.originalname)

    }

这样存储的文件就是有扩展名的文件

post就是

app.post(‘/getfile‘,upload.any(),function(req,res) {

    console.log(req.files)

    res.json("收到")

})

想要看收到的文件的话，any在req.files,single则在req.file

github链接https://github.com/expressjs/multer