node封装传formdata数据的接口(多文件上传)

17 篇文章 0 订阅
16 篇文章 0 订阅

前文:        

        这个星期的主要完成的东西我想就是多文件上传了,这也是我第一次封装传formdata数据类型的数据,因为也是刚学不久node,很多东西都是要自己摸索的,关于这个多文件上传我也是查阅了不少的博客,也是问了学长,最后问题才得以解决。关于接口调用的渲染,我是用了layui 的一个模板,不过接口调用的核心代码还是自己敲的,可用行应该还好。最后实现的页面效果图如下:

 1.node封装多文件上传接口:

const FormData=require('form-data');
const fs=require('fs');
var multipart = require('connect-multiparty');//调formdata接口的中间件
var multipartMiddleware = multipart();
router.post('/api/UploadAttachment', multipartMiddleware,(req, res) => {
    let formdata = new FormData()
    //建立FormData()对象,注意:node中使用要先下载formdata中间件
    for (let a in req.files) {
        formdata.append('file', fs.createReadStream(req.files[a].path),req.files[a].originalFilename)//第二个参数试上传的文件名
    }
    //循环传递file文件对象,req.files[a].path是该文件的本地地址, 用fs.createReadStream(req.files[a].path)进行读取创作,req.files[a].originalFilename是文件本名,用来传出文件名称
    formdata.append('enclosure_name',req.body.enclosure_name)
    formdata.append('application_id',req.body.application_id)
    //req.body中传递非文件数据, req.files是文件数据
    axios({
        method: 'POST',
        url: 'http://110.40.205.103:8099/user/photo',
        data:formdata,
        // headers: formdata.getHeaders(),
        headers:{
            token:req.session.token,
            formdata:formdata.getHeaders(),//传递formdata数据
            maxBodyLength:10000000
        }
    })
        .then((result) => {
            console.log(result.data)
            res.send({ err: 0, msg: result.data })
        })
        .catch((err) => {
            // console.log(err)
            res.send({ err: -1, msg: err})
        })
})  

2.js调用接口:

关于接口的调用就仁者见仁,智者见智了,为了不同的渲染,会有各种调用方法,不过核心的部分主要还是那么多,关于formdata接口js的调用我发过一个博客:

项目总结(周记)_阿泽不会飞的博客-CSDN博客

 写的是最基本的调用,多文件上传无非就是使用for循环进行file的多文件传值,如:

let i=1; 
for (let key in files) {
            formData.append(`file${i}`,files[key])
            i++;
 }
//files是选择的多文件数组,key,value使用layui模板时候的调用,主要是专递data对象,具体使用视情况而定

结束!

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿泽不会飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值