如何使用fetch上传文件
如何使用fetch上传文件
提问于 2019-03-23 01:26:19
我知道以前有人问过这个问题，但没有一个解决方案对我有效。首先我试着用axios来解决这个问题，但是在读到它的时候发现了一个错误，不允许我使用它来上传文件。所以我只能用fetch了。
这是我的上传函数：
export async function postStudyPlan(plan, headers) {
const options = {
method: "POST",
body: plan
}
return fetch(`${HOST}:${PORT}/study-plans/add`, options)
.then(res => {return res.json()})
.catch(err => console.log(err));
}我是这么称呼它的：
onStudyPlanUpload(files) {
const file = files[0];
let formData = new FormData();
formData.append("pdf", file);
formData.append("comments", "A really lit study plan!");
formData.append("approved", true);
formData.append("uploaded_by", "Name");
formData.append("date_uploaded", "2012-02-1");
formData.append("university", "australian_national_university");
let plan = {
"pdf": file,
"comments": "A really lit study plan!",
"approved": true,
"uploaded_by": "Name",
"date_uploaded": Date.now(),
"university": "australian_national_university"
}
postStudyPlan(formData)
.then(res => console.log(res))
.catch(err => console.log(err))
}我知道file实际上是一个文件。每当我将"pdf"更改为普通字符串时，一切都很正常。但是当我使用File对象时，我没有收到任何东西到我的后端，只收到一个空对象。这里我漏掉了什么？我觉得我的解决方案与我在网上找到的所有其他解决方案基本相同。
编辑：还尝试使用FormData并将headers: {"Content-Type": "application/x-www-form-urlencoded"}添加到选项中。同样的结果。
编辑2我开始认为我的后端可能是问题所在！这是我的后端，实际上我正在获取"data“事件的一些输出。不确定如何处理它...
router.route("/add").post((req, res) => {
req.on("data", function(data) {
console.log("got data: " + data.length);
console.log("the Data: ?" )
// let t = new Test(data);
// t.save()
// .then(res => console.log(res))
})
req.on("end", function(d) {
console.log("ending!");
})
req.on("error", function(e){
console.log("ERROR: " + e);
})
});回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-27 04:08:10
我会回答我自己的问题。如果其他人遇到这个问题，那就是后端有问题。这是我的最终解决方案，使用busboy来处理传入的表单数据。我没有改变我的服务器上的任何东西，但我的路由器必须更新。这是我的路由器，负责处理POST请求：
const express = require("express");
const mongoose = require("mongoose");
require('./../../models/Test');
const path = require("path");
const fs = require("fs");
const router = express.Router();
const Busboy = require("busboy");
router.route("/add").post((req, res, next) => {
let busboy = new Busboy({headers: req.headers});
// A field was recieved
busboy.on('field', function (fieldname, val, valTruncated, keyTruncated) {
if (req.body.hasOwnProperty(fieldname)) { // Handle arrays
if (Array.isArray(req.body[fieldname])) {
req.body[fieldname].push(val);
} else {
req.body[fieldname] = [req.body[fieldname], val];
}
} else { // Else, add field and value to body
req.body[fieldname] = val;
console.log(req.body);
}
});
// A file was recieved
busboy.on('file', function (fieldname, file, filename, encoding, mimetype) {
console.log("File incoming: " + filename);
var saveTo = path.join('.', filename);
console.log('Uploading: ' + saveTo);
file.pipe(fs.createWriteStream(saveTo));
});
// We're done here boys!
busboy.on('finish', function () {
console.log('Upload complete');
res.end("That's all folks!");
});
return req.pipe(busboy);
});
module.exports = router;最后，我完成了onStydyPlanUpload()函数！
onStudyPlanUpload(files) {
const file = files[0];
let formData = new FormData();
formData.append("pdf", file, file.name);
formData.append("comments", "A really lit study plan!");
formData.append("approved", true);
formData.append("uploaded_by", "Melker's mamma");
formData.append("date_uploaded", new Date());
formData.append("university", "australian_national_university");
const HOST = "http://localhost";
const PORT = 4000;
axios.post(`${HOST}:${PORT}/test/add`, formData)
.then(res => console.log(res))
.catch(err => console.log(err))
}获得帮助的来源：https://gist.github.com/shobhitg/5b367f01b6daf46a0287
Stack Overflow用户
发布于 2019-03-23 01:34:50
您应该使用'Content-Type': 'application/x-www-form-urlencoded'作为fetch header的FormData。
Stack Overflow用户
发布于 2019-03-25 17:58:43
我想让你尝试一种简单的方法。创建一个实际表单的实例，而不是将文件附加到FormData中。
onStudyPlanUpload = (event) => {
event.preventDefault();
const formData = new FormData(event.target);
postStudyPlan(formData)
.then(res => console.log(res))
.catch(err => console.log(err))
}HTML
<form onSubmit={this.onStudyPlanUpload} encType="multipart/form-data" ref={el => this.form = el}>
<input type="file" name="pdf" onChange={() => { this.form.dispatch(new Event('submit'))}/>
<input type="hidden" name="comments" value="A really lit study plan!" />
<input type="hidden" name="approved" value=true />
<input type="hidden" name="uploaded_by" value="Name"/>
<input type="hidden" name="date_uploaded" value="2012-02-1"/>
<input type="hidden" name="university" value="australian_national_university"/>
</form> 当更改文件输入时，它将触发表单提交(onStudyPlanUpload)。
希望这能起作用！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55304891
复制相关文章
相似问题
腾讯云开发者
