如何将文件附加到 FormData()?
How do I append a file to FormData()?
fd.append("upload", file)
产量,
------WebKitFormBoundaryJnjpATRkxe2Duwwu
Content-Disposition: form-data; name="userid"
8022171621665209152
------WebKitFormBoundaryJnjpATRkxe2Duwwu
Content-Disposition: form-data; name="upload"; filename="sample.csv"
Content-Type: text/csv
------WebKitFormBoundaryJnjpATRkxe2Duwwu--
fd.append("upload", evt.target.result)
产量,
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="userid"
8022171621665209152
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="upload"
"Healthy1.jpg","1","3","1","5"
"Unhealthy1.jpg","0","2","1","2"
"Water1.jpg","2","2","1","3"
------WebKitFormBoundaryITfVxS7FbNWfk3Ty--
但是我需要这个,
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="userid"
8022171621665209152
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="upload"; filename="sample.csv"
Content-Type: text/csv
"Healthy1.jpg","1","3","1","5"
"Unhealthy1.jpg","0","2","1","2"
"Water1.jpg","2","2","1","3"
------WebKitFormBoundaryITfVxS7FbNWfk3Ty--
这是我的代码:
app.ports.uploadFile.subscribe(function(userid){
var file = document.getElementById("csv").files[0];
var fr = new FileReader();
fr.readAsText(file, "UTF-8");
fr.onload = function (evt) {
console.log(evt.target.result);
var fd = new FormData();
fd.append("userid", userid)
fd.append("upload", file) // <<<<< WHAT DO I PUT HERE?
var xhr = new XMLHttpRequest()
xhr.open('post', "http://localhost:8668/upload/ugimgset", true)
xhr.setRequestHeader("Content-Type", "multipart/form-data")
xhr.setRequestHeader("Authorization", "Bearer " + token() )
xhr.send(fd)
}
})
我找到了错误的根源
- 我只需要
FormData()
- 它会处理文件和隐藏字段。
- 我正在覆盖
Content-Type
。当我这样做时,表格边界丢失了:
`xhr.setRequestHeader("Content-Type", "multipart/form-data")
更正后的代码如下(连同一些上下文):
app.ports.uploadFile.subscribe(function(pathAndId){
var [tasksrvPath, formId] = pathAndId
try {
var fd = new FormData(document.getElementById(formId));
var r = new XMLHttpRequest()
r.open("POST", tasksrvPath, true)
r.setRequestHeader("Authorization", "Bearer " + token() )
r.send(fd)
r.onload = function() {
app.ports.status.send(r.statusText)
}
} catch(e) {
console.log(e.message);
}
})
fd.append("upload", file)
产量,
------WebKitFormBoundaryJnjpATRkxe2Duwwu
Content-Disposition: form-data; name="userid"
8022171621665209152
------WebKitFormBoundaryJnjpATRkxe2Duwwu
Content-Disposition: form-data; name="upload"; filename="sample.csv"
Content-Type: text/csv
------WebKitFormBoundaryJnjpATRkxe2Duwwu--
fd.append("upload", evt.target.result)
产量,
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="userid"
8022171621665209152
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="upload"
"Healthy1.jpg","1","3","1","5"
"Unhealthy1.jpg","0","2","1","2"
"Water1.jpg","2","2","1","3"
------WebKitFormBoundaryITfVxS7FbNWfk3Ty--
但是我需要这个,
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="userid"
8022171621665209152
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="upload"; filename="sample.csv"
Content-Type: text/csv
"Healthy1.jpg","1","3","1","5"
"Unhealthy1.jpg","0","2","1","2"
"Water1.jpg","2","2","1","3"
------WebKitFormBoundaryITfVxS7FbNWfk3Ty--
这是我的代码:
app.ports.uploadFile.subscribe(function(userid){
var file = document.getElementById("csv").files[0];
var fr = new FileReader();
fr.readAsText(file, "UTF-8");
fr.onload = function (evt) {
console.log(evt.target.result);
var fd = new FormData();
fd.append("userid", userid)
fd.append("upload", file) // <<<<< WHAT DO I PUT HERE?
var xhr = new XMLHttpRequest()
xhr.open('post', "http://localhost:8668/upload/ugimgset", true)
xhr.setRequestHeader("Content-Type", "multipart/form-data")
xhr.setRequestHeader("Authorization", "Bearer " + token() )
xhr.send(fd)
}
})
我找到了错误的根源
- 我只需要
FormData()
- 它会处理文件和隐藏字段。 - 我正在覆盖
Content-Type
。当我这样做时,表格边界丢失了:
`xhr.setRequestHeader("Content-Type", "multipart/form-data")
更正后的代码如下(连同一些上下文):
app.ports.uploadFile.subscribe(function(pathAndId){
var [tasksrvPath, formId] = pathAndId
try {
var fd = new FormData(document.getElementById(formId));
var r = new XMLHttpRequest()
r.open("POST", tasksrvPath, true)
r.setRequestHeader("Authorization", "Bearer " + token() )
r.send(fd)
r.onload = function() {
app.ports.status.send(r.statusText)
}
} catch(e) {
console.log(e.message);
}
})