码迷,mamicode.com
首页 > 其他好文 > 详细

multer和formdata的踩坑

时间:2019-10-12 18:36:59      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:其他   orm   files   button   for   img   方法   下标   input   

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

首先百度了准备了一哈知识,用到了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

multer和formdata的踩坑

标签:其他   orm   files   button   for   img   方法   下标   input   

原文地址:https://www.cnblogs.com/shaolingyun/p/11663077.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!