FormData上传文件同时附带其他参数,后台node接收

wean 发布于2019-08-22 11:11 / 517人阅读

摘要：部分，选择文件为例中上传文件部分，主要用到的是和告诉不要处理发送的数据告诉不要设置请求头失败后台接收部分解析用的是上传的相关参数接收文件触发判断文件类型是否是遍历上传文件解析成功解析数据文件格式不正确系统错误上传出错放弃上传参考链接

1.html部分，选择文件(excel为例)

2.js中上传文件部分，主要用到的是jequery和FormData

var formData = new FormData($("#uploadForm")[0]);
formData.append("mapType", "baidu");

$.ajax({
    url: "/upload/order",
    type: "POST",
    data: formData,
    processData: false, //  告诉jquery不要处理发送的数据
    contentType: false // 告诉jquery不要设置content-Type请求头
}).done(function (res) {

}).fail(function (res) {
    console.log("失败");
});

3.后台node接收部分,解析excel用的是"node-xlsx"

const express = require("express");
const fs = require("fs");
const formidable = require("formidable");
const xlsx = require("node-xlsx");

const router = express.Router();

router.post("/order", (req, res) => {
    console.log(" ########## POST /upload ####### ");

    let fileTypeError = false;
    const targetPath = `${__dirname}/upload`;
    const form = new formidable.IncomingForm();
    form.encoding = "utf-8";
    form.keepExtensions = true;
    form.maxFieldsSize = 10 * 1024 * 1024;
    form.uploadDir = targetPath;

    const files = [];
    const fields = [];

    let mapType = "gaode";

    form.on("field", (field, value) => { // 上传的相关参数("mapType", "baidu")
        if (field === "mapType")mapType = value;
        fields.push([field, value]);
    });

    form.on("file", (field, file) => { // 接收文件触发
        console.log(`upload file: ${file.name}`);
        // 判断文件类型是否是xlsx
        if (file.type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
            fileTypeError = true;
        }
        files.push([field, file]);
    });
    form.on("end", () => {
        // 遍历上传文件
        let fileName = "";
        let obj = "";
        const folderExists = fs.existsSync(targetPath);
        if (folderExists) {
            const dirList = fs.readdirSync(targetPath);
            dirList.forEach(async (item) => {
                if (!fs.statSync(`${targetPath}/${item}`).isDirectory()) {
                    console.log(`parse item:${targetPath}/${item}`);
                    fileName = `${targetPath}/${item}`;
                    if (!fileTypeError) {
                        // 解析excel
                        obj = xlsx.parse(fileName, {
                            cellDates: true
                        });

                        console.log(JSON.stringify(obj));
                        res.send({
                            code: 10000,
                            msg: "成功解析数据",
                            resOrders: resOrderObjs
                        });
                    } else {
                        res.send({
                            code: 20003,
                            msg: "文件格式不正确"
                        });
                    }
                    fs.unlinkSync(fileName); // delete file
                }
            });
        } else {
            res.send({
                rtnCode: "1",
                rtnInfo: "系统错误"
            });
        }
    });
    form.on("error", (err) => {
        res.send({
            rtnCode: "1",
            rtnInfo: "上传出错"
        });
    });
    form.on("aborted", () => {
        res.send({
            rtnCode: "1",
            rtnInfo: "放弃上传"
        });
    });
    form.parse(req);
});

参考链接：
http://www.cnblogs.com/lyr121...
https://lipeishang.github.io/...

idc机房托管私有云 formdata上传文件文件上传到其他服务器接收传入参数 python接收参数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91940.html

【elementUI系列】使用elementUI调用一次接口同时上传图片和文件，同时需要携带其他参数

摘要：今天有一个坑，同时要上传图片和文件，而且图片要展示缩略图，文件要展示列表。我的思路是首先，只上传附件照片，这个直接看的官方例子就行，不仅仅上传附件照片，还同时上传其他参数。然后，再做上传照片和文件，上传其他参数，其实也就是文件合并。今天有一个坑，同时要上传图片和文件，而且图片要展示缩略图，文件要展示列表。我的思路是：首先，只上传附件照片，这个直接看ele的官方例子就行，不仅仅上传...

lavor 2019-08-23 13:55 评论0 收藏0
基于Vue + Node.js + MongoDB的图片上传组件，实现图片的预览和删除

摘要：网址功能单图多图上传图片上传预览上传进度条分组上传，分组查询新建分组，删除分组删除图片选择图片目录结构前端利用搭建，中引入子组件。实现分组的新增查询删除。利用模块实现删除文件功能。公司要写一些为自身业务量身定制的的组件，要基于Vue,写完后扩展了一下功能，选择写图片上传是因为自己之前一直对这个功能比较迷糊，所以这次好好了解了一下。演示在网址打开后的show.gif中。使用技术：Vu...

hzx 2019-06-26 17:30 评论0 收藏0
Element-ui实现合并多图上传（一次请求多张图片）

摘要：实现多图上传主要用到以下两个属性是自带多图上传的，但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入，有截图可以看出，实质是进行多次请求在上传事件触发后，多图上传的默认实现调用了三次请求。前言工作中碰到需要多图上传，在使用element-ui解决过程中碰到一些问题，在这里分享给大家。环境： Springboot+Vue+Element-ui 正文这次上传使用的是Elem...

loostudy 2019-08-19 10:51 评论0 收藏0
[ 一起学React系列 -- 8 ] React中的文件上传

摘要：前言本期的主题是在中如何实现文件上传。文件上传解决方案目前比较主流的解决方案就是表单或者和表单来实现。文件上传解决方案表单利用表单组件进行文件上传是远古时期就一直在用的方法而且还真经久不衰，厉害了。终于抽出时间来继续更新自己的博客，最近忙得够呛...对于该系列博客不知道大家有没有这样的看法，对于React常见的基础东西并没有过多或者详细列出，感觉有点不符合系列标题。的确，笔者一开始也...

Travis 2019-08-23 12:35 评论0 收藏0
前端h5文件切片上传,后台php接收切片并合并

摘要：网上很多文件切片上传的文章看了很多最终自己总结了下主要思路如下需要实现的功能前端多文件上传前端文件切片并命名文件同步上传切片同步上传后端接受切片并根据文件名称保存至文件夹后端判断是否是最后一个切片合并切片用到的技术文件切片切片上传请求参数网上很多文件切片上传的文章, 看了很多, 最终自己总结了下, 主要思路如下： 1. 需要实现的功能前端多文件上传前端文件切片, 并命名uuid...

whinc 2019-07-01 10:54 评论0 收藏0