摘要:部分,選擇文件為例中上傳文件部分,主要用到的是和告訴不要處理發(fā)送的數(shù)據(jù)告訴不要設(shè)置請(qǐng)求頭失敗后臺(tái)接收部分解析用的是上傳的相關(guān)參數(shù)接收文件觸發(fā)判斷文件類型是否是遍歷上傳文件解析成功解析數(shù)據(jù)文件格式不正確系統(tǒng)錯(cuò)誤上傳出錯(cuò)放棄上傳參考鏈接
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不要處理發(fā)送的數(shù)據(jù) contentType: false // 告訴jquery不要設(shè)置content-Type請(qǐng)求頭 }).done(function (res) { }).fail(function (res) { console.log("失敗"); });
3.后臺(tái)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) => { // 上傳的相關(guān)參數(shù)("mapType", "baidu") if (field === "mapType")mapType = value; fields.push([field, value]); }); form.on("file", (field, file) => { // 接收文件觸發(fā) 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: "成功解析數(shù)據(jù)", resOrders: resOrderObjs }); } else { res.send({ code: 20003, msg: "文件格式不正確" }); } fs.unlinkSync(fileName); // delete file } }); } else { res.send({ rtnCode: "1", rtnInfo: "系統(tǒng)錯(cuò)誤" }); } }); form.on("error", (err) => { res.send({ rtnCode: "1", rtnInfo: "上傳出錯(cuò)" }); }); form.on("aborted", () => { res.send({ rtnCode: "1", rtnInfo: "放棄上傳" }); }); form.parse(req); });
參考鏈接:
http://www.cnblogs.com/lyr121...
https://lipeishang.github.io/...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/91940.html
摘要:今天有一個(gè)坑,同時(shí)要上傳圖片和文件,而且圖片要展示縮略圖,文件要展示列表。我的思路是首先,只上傳附件照片,這個(gè)直接看的官方例子就行,不僅僅上傳附件照片,還同時(shí)上傳其他參數(shù)。然后,再做上傳照片和文件,上傳其他參數(shù),其實(shí)也就是文件合并。 今天有一個(gè)坑,同時(shí)要上傳圖片和文件,而且圖片要展示縮略圖,文件要展示列表。 我的思路是: 首先,只上傳附件照片,這個(gè)直接看ele的官方例子就行,不僅僅上傳...
摘要:網(wǎng)址功能單圖多圖上傳圖片上傳預(yù)覽上傳進(jìn)度條分組上傳,分組查詢新建分組,刪除分組刪除圖片選擇圖片目錄結(jié)構(gòu)前端利用搭建,中引入子組件。實(shí)現(xiàn)分組的新增查詢刪除。利用模塊實(shí)現(xiàn)刪除文件功能。 公司要寫一些為自身業(yè)務(wù)量身定制的的組件,要基于Vue,寫完后擴(kuò)展了一下功能,選擇寫圖片上傳是因?yàn)樽约褐耙恢睂?duì)這個(gè)功能比較迷糊,所以這次好好了解了一下。演示在網(wǎng)址打開后的show.gif中。 使用技術(shù):Vu...
摘要:實(shí)現(xiàn)多圖上傳主要用到以下兩個(gè)屬性是自帶多圖上傳的,但是細(xì)心的朋友可能發(fā)現(xiàn)默認(rèn)多圖的實(shí)現(xiàn)可能和我們預(yù)期有些出入,有截圖可以看出,實(shí)質(zhì)是進(jìn)行多次請(qǐng)求在上傳事件觸發(fā)后,多圖上傳的默認(rèn)實(shí)現(xiàn)調(diào)用了三次請(qǐng)求。 前言 工作中碰到需要多圖上傳,在使用element-ui解決過程中碰到一些問題,在這里分享給大家。 環(huán)境: Springboot+Vue+Element-ui 正文 這次上傳使用的是Elem...
摘要:前言本期的主題是在中如何實(shí)現(xiàn)文件上傳。文件上傳解決方案目前比較主流的解決方案就是表單或者和表單來實(shí)現(xiàn)。文件上傳解決方案表單利用表單組件進(jìn)行文件上傳是遠(yuǎn)古時(shí)期就一直在用的方法而且還真經(jīng)久不衰,厲害了。 終于抽出時(shí)間來繼續(xù)更新自己的博客,最近忙得夠嗆...對(duì)于該系列博客不知道大家有沒有這樣的看法,對(duì)于React常見的基礎(chǔ)東西并沒有過多或者詳細(xì)列出,感覺有點(diǎn)不符合系列標(biāo)題。的確,筆者一開始也...
摘要:網(wǎng)上很多文件切片上傳的文章看了很多最終自己總結(jié)了下主要思路如下需要實(shí)現(xiàn)的功能前端多文件上傳前端文件切片并命名文件同步上傳切片同步上傳后端接受切片并根據(jù)文件名稱保存至文件夾后端判斷是否是最后一個(gè)切片合并切片用到的技術(shù)文件切片切片上傳請(qǐng)求參數(shù) 網(wǎng)上很多文件切片上傳的文章, 看了很多, 最終自己總結(jié)了下, 主要思路如下: 1. 需要實(shí)現(xiàn)的功能 前端多文件上傳 前端文件切片, 并命名uuid...
閱讀 1542·2023-04-26 00:20
閱讀 1132·2023-04-25 21:49
閱讀 814·2021-09-22 15:52
閱讀 587·2021-09-07 10:16
閱讀 979·2021-08-18 10:22
閱讀 2676·2019-08-30 14:07
閱讀 2246·2019-08-30 14:00
閱讀 2661·2019-08-30 13:00