我需要使用 axios 发送 post 请求,以便使用 Filepond Uploader 上传文件。
我该怎么做?
我正在使用如下所示的自定义流程处理程序,但它不起作用。
processHandler: (fieldName, file, metadata, load, error, progress, abort) => {
let formData = new FormData();
let uploadPercentage = 0;
formData.append('file', file);
console.log(formData);
HTTP.post('v1/upload', formData,
{
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: function (progressEvent) {
uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
console.log(uploadPercentage);
}.bind(this)
})
.then((response) => {
console.log(response);
// Should call the load method when done and pass the returned server file id
// the load method accepts either a string (id) or an object
// the unique server file id is used by revert and restore functions
load(response.data.data.id);
})
.catch((error) => {
console.error(error);
error("Has error");
});
// Should call the progress method to update the progress to 100% before calling load
// Setting computable to false switches the loading indicator to infinite mode
// (computable, processedSize, totalSize)
progress(true, 0, 1024);
// Should expose an abort method so the request can be cancelled
return {
abort: () => {
// User tapped abort, cancel our ongoing actions here
// Let FilePond know the request has been cancelled
abort();
}
};
}
我正在使用 this guide但我不清楚如何创建上传和加载过程来处理我的服务器响应和请求。
谢谢。
最佳答案
FilePond 作者在这里。
我不确定我是否理解问题描述,但我会尽力提供帮助。我快速浏览了 Axios 文档 ( https://github.com/axios/axios ) 并设置了以下代码段。
{
processHandler: (fieldName, file, metadata, load, error, progress, abort) => {
// set data
const formData = new FormData();
formData.append('file', file, file.name);
// related to aborting the request
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// the request itself
axios({
method: 'post',
url: 'v1/upload',
data: formData,
cancelToken: source.token,
onUploadProgress: (e) => {
// updating progress indicator
progress(e.lengthComputable, e.loaded, e.total);
}
}).then(response => {
// passing the file id to FilePond
load(response.data.data.id)
}).catch((thrown) => {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
// Setup abort interface
return {
abort: () => {
source.cancel('Operation canceled by the user.');
}
};
};
}
关于file-upload - 如何在vue js中使用Filepond并使用axios上传文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52220537/