react上傳檔案顯示上傳進度

axios 是乙個基於 promise 的 http 庫，可以用在瀏覽器和 node.js 中。

在使用react, vue框架的時候, 如果需要監聽檔案上傳可以使用axios裡的onuploadprogress.

確保有node環境

進入目錄
npm install antd //
安裝antd ui元件
npm run start 
//啟動專案

import react from 'react';

import 'antd/dist/antd.css';
import from 'antd';
import from '@ant-design/icons';
import axios from "axios"axios.defaults.withcredentials = true
constructor(props) 
} //檔案上傳改變的時候
configs =,
withcredentials: 
true
, onuploadprogress: (progress) => =progress
let = this
.state
console.log(loaded, filsesize);
let baifenbi = (loaded / filsesize * 100).tofixed(2)
this
.setstate()
}} 
//點選上傳
handleupload = () => = this
.state;
const formdata = new
formdata();
filelist.foreach(file =>);
this
.setstate();
//請求本地服務
axios.post("", formdata, this.configs).then(res =>)
}).finally(log =>)
} onchange = (info) =>)
}if (info.file.status === 'done') file uploaded successfully`);
} else
if (info.file.status === 'error') file upload failed.`);
}} render() = this
.state;
const props =;
});},
beforeupload: file =>));
return
false
; },
filelist,
};return
( 
} >
click to upload
type="primary"onclick=
disabled=
loading=
style=}
>
this.state.baifenbi !== 0 ? 'success' : ''} percent=>
) }
}export 
1.先建立資料夾websever

cd websever
npm -init -y //建立package.json檔案2.安裝express 以及檔案上傳需要的包npm install express multer ejs

var express = require('express');

var path = require('path');

var fs = require('fs')

var multer = require('multer')

//設定跨域訪問

(req, res, next)

else

})//

模板引擎

res.render("index")

})//

上傳檔案

var upload = multer().any();

upload(req, res, err =>

let file = req.files[0]

let filname =file.originalname

var oldpath =file.path

var newpath = path.join(process.cwd(), "upload/" + new date().gettime()+filname)

var src =fs.createreadstream(oldpath);

var dest =fs.createwritestream(newpath);

src.pipe(dest);

src.on("end", () =>

res.send("ok")

})})

src.on("error", err =>)

})})

res.send("404")

})

axios Vue上傳檔案顯示進度

最近在用vue，然後上傳檔案時需要顯示進度，於是網上搜了一下，經過自己實測終於也弄明白了 h4 上傳檔案 pclass input zone spanv if filename spanv else 請選擇檔案上傳 inputtype file name file value placeholder...

jquery ajax非同步上傳檔案顯示進度條

前言 今天專案中加了乙個上傳檔案加進度條的需求，我就搞了一下。時間寶貴不多說，直接進入正題。非同步上傳檔案是要用到ajax裡的乙個小的知識點 xhr xml http request 乙個物件，xhr物件也是ajax乙個核心。關於使用它也很簡單 就四步 下面這樣寫也可以向後端進行傳送請求 var x...

ajax上傳檔案及進度顯示

之前在博文 原生ajax寫法就提及過ajax2.0與1.0的差別是多了formdata和利用formdata檔案上傳 當然還有跨域，但不是本文的重點 那麼具體怎麼樣實現ajax上傳檔案呢？一般來說，瀏覽器獲取檔案的方法有拖拽和input file兩種 先定義乙個放檔案的陣列 var files 拖拽...