javascript - 以文件上传的形式接收进度
问题描述
我有一些上传文件的代码,我正在寻找一种方法来接收进度百分比,以便将其输入进度条。我尝试了 ProgressEventInit 和 ProgressEvent,但我没有得到我需要的东西。有人有想法么。下面是代码:
function objToQuery(obj: {[key: string]: any}) {
if (R.isEmpty(obj)) {
return '';
}
return `?${R.toPairs(obj).map(kvPair => kvPair.join('=')).join('&')}`;
}
export default async function request<T>(url: string, options: RequestInit) {
const response = await window.fetch(url, { credentials: 'include', ...options });
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const json = (await parseJSON<T>(response))!;
return checkStatus(response, json);
}
export async function postFiles<T>(url: string, postForm: FormData, queryData: {} = {}) {
const headers: HeadersInit = {
Accept: 'application/json',
};
return request<T>(`${apiRoot}/${url}${objToQuery(queryData)}`, {
headers,
method: 'POST',
body: postForm,
});
}
解决方案
注意:由于跨源策略,这可能在片段中不起作用,请在您的机器上尝试。
希望这会有所帮助。
function postFile() {
var formdata = new FormData();
formdata.append('file1', $('#file1')[0].files[0]);
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function (e) {
var file1Size = $('#file1')[0].files[0].size;
if (e.loaded <= file1Size) {
var percent = Math.round(e.loaded / file1Size * 100);
$('#progress-bar-file1').width(percent + '%').html(percent + '%');
}
if(e.loaded == e.total){
$('#progress-bar-file1').width(100 + '%').html(100 + '%');
}
});
request.open('post', '/echo/html/');
request.timeout = 45000;
request.send(formdata);
}
.progress-wrapper {
width:100%;
}
.progress-wrapper .progress {
background-color:green;
width:0%;
padding:5px 0px 5px 0px;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<form id="form1">
<input id="file1" type="file" />
<div class="progress-wrapper">
<div id="progress-bar-file1" class="progress"></div>
</div>
<button type="button" onclick="postFile()">Upload File</button>
</form>
</html>
axios是很好的反应解决方案
upload(files) {
const config = {
onUploadProgress: function(progressEvent) {
var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
console.log(percentCompleted)
}
}
let data = new FormData()
data.append('file', files[0])
axios.put('/endpoint/url', data, config)
.then(res => console.log(res))
.catch(err => console.log(err))
}
推荐阅读
- linux - `sudo yum update` 抛出 Requires ... Removing ... Obsoleted By
- snakemake - 引用另一个 Snakemake 规则的输入或输出文件
- apache - htaccess 不适用于包含的 & 符号
- python - 收到错误“TypeError:得到了一个意外的关键字参数”,但参数在函数定义中
- python - 部署具有 .data-00000-of-00001 的 Web 应用程序
- c++ - 我的代码有什么问题?,我该如何进一步改进它?
- node.js - 在 Devilbox 上更改 NodeJS 版本?
- reactjs - 当其他组件文本特定时如何启用材质按钮
- jenkins - 使用 jenkins 管道 groovy 脚本在多个主机上运行脚本
- python - 为什么这个 `pip install` 命令会失败?