rau*_*tos 6 html javascript http multipartform-data go
我最近开始玩,所以我仍然是一个菜鸟,如果我犯了太多错误,对不起.我一直试图解决这个问题很长一段时间,但我只是不明白发生了什么.在我的main.go文件中,我有一个主要功能:
func main() {
http.HandleFunc("/", handler)
http.HandleFunc("/submit/", submit)
log.Fatal(http.ListenAndServe(":8080", nil))
}
Run Code Online (Sandbox Code Playgroud)
处理函数如下所示:
func handler(w http.ResponseWriter, r *http.Request) {
data, _ := ioutil.ReadFile("web/index.html")
w.Write(data)
}
Run Code Online (Sandbox Code Playgroud)
我知道这不是服务网站的最佳方式提交功能如下所示:
func submit(w http.ResponseWriter, r *http.Request) {
log.Println("METHOD IS " + r.Method + " AND CONTENT-TYPE IS " + r.Header.Get("Content-Type"))
r.ParseMultipartForm(32 << 20)
file, header, err := r.FormFile("uploadFile")
if err != nil {
json.NewEncoder(w).Encode(Response{err.Error(), true})
return
}
defer file.Close()
out, err := os.Create("/tmp/file_" + time.Now().String() + ".png")
if err != nil {
json.NewEncoder(w).Encode(Response{err.Error(), true})
return
}
defer out.Close()
_, err = io.Copy(out, file)
if err != nil {
json.NewEncoder(w).Encode(Response{err.Error(), true})
return
}
json.NewEncoder(w).Encode(Response{"File '" + header.Filename + "' submited successfully", false})
}
Run Code Online (Sandbox Code Playgroud)
问题是当执行提交函数时,r.Method
is GET
和r.Header.Get("Content-Type")
是一个空字符串,然后它继续直到第一个如果r.FormFile返回以下错误:
request Content-Type isn't multipart/form-data
我不明白为什么r.Method总是GET并且没有Content-类型.我试图以许多不同的方式做index.html,但r.Method总是GET,而Content-Type是空的.这是index.html中上传文件的函数:
function upload() {
var formData = new FormData();
formData.append('uploadFile', document.querySelector('#file-input').files[0]);
fetch('/submit', {
method: 'post',
headers: {
"Content-Type": "multipart/form-data"
},
body: formData
}).then(function json(response) {
return response.json()
}).then(function(data) {
window.console.log('Request succeeded with JSON response', data);
}).catch(function(error) {
window.console.log('Request failed', error);
});
}
Run Code Online (Sandbox Code Playgroud)
这是HTML:
<input id="file-input" type="file" name="uploadFile" />
Run Code Online (Sandbox Code Playgroud)
请注意,标记不在标记内,我认为这可能是问题所以我将函数和HTML都改为这样的:
function upload() {
fetch('/submit', {
method: 'post',
headers: {
"Content-Type": "multipart/form-data"
},
body: new FormData(document.querySelector('#form')
}).then(function json(response) {
return response.json()
}).then(function(data) {
window.console.log('Request succeeded with JSON response', data);
}).catch(function(error) {
window.console.log('Request failed', error);
});
}
<form id="form" method="post" enctype="multipart/form-data" action="/submit"><input id="file-input" type="file" name="uploadFile" /></form>
Run Code Online (Sandbox Code Playgroud)
但那也不起作用.我用Google搜索了如何使用fetch()以及如何从go上接收文件,我发现它们与我的相似,我不知道我做错了什么.
更新:
使用后curl -v -F 'uploadFile=@\"C:/Users/raul-/Desktop/test.png\"' http://localhost:8080/submit
我得到以下输出:
* Trying ::1...
* Connected to localhost (::1) port 8080 (#0)
> POST /submit HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.45.0
> Accept: */*
> Content-Length: 522
> Expect: 100-continue
> Content-Type: multipart/form-data; boundary=---------------------------a17d4e54fcec53f8
>
< HTTP/1.1 301 Moved Permanently
< Location: /submit/
< Date: Wed, 18 Nov 2015 14:48:38 GMT
< Content-Length: 0
< Content-Type: text/plain; charset=utf-8
* HTTP error before end of send, stop sending
<
* Closing connection 0
Run Code Online (Sandbox Code Playgroud)
我正在运行的控制台在go run main.go
使用curl时没有输出任何内容.
我设法解决了我的问题,所以这是以防其他人需要它.并感谢@JiangYD使用curl测试服务器的提示.
http.HandleFunc("/submit/", submit)
但是我正在发出一个POST请求/submit
(注意丢失的斜杠)<<这很重要,因为重定向我做了@JiangYD说并使用curl测试服务器,我用响应更新了我的答案.我发现有一个301重定向,因为我没有把它放在那里,我决定使用以下curl命令
curl -v -F 'uploadFile=@\"C:/Users/raul-/Desktop/test.png\"' -L http://localhost:8080/submit
Run Code Online (Sandbox Code Playgroud)
(注意-L)那样curl跟着重定向,虽然它再次失败,因为,当重定向时,curl从POST切换到GET但是通过该响应我发现请求/submit
被重定向到/submit/
我记得那是我的写作方式它在main
功能中.
在修复它仍然失败之后,响应是http: no such file
通过查看net/http
代码我发现它意味着该字段不存在,所以我做了一个快速测试迭代所有获得的字段名称:
for k, _ := range r.MultipartForm.File {
log.Println(k)
}
Run Code Online (Sandbox Code Playgroud)
我得到'uploadFile
了字段名称,我删除了curl命令中的单引号,现在它完美地上传了文件
但它并没有在这里结束,我现在知道服务器工作正常,因为我可以使用上传文件curl
,但当我尝试通过托管网页上传时,我收到了一个错误:no multipart boundary param in Content-Type
.
所以我发现我想要在标题中包含边界,我将fetch更改为这样的东西:
fetch('/submit', {
method: 'post',
headers: {
"Content-Type": "multipart/form-data; boundary=------------------------" + boundary
}, body: formData})
Run Code Online (Sandbox Code Playgroud)
我像这样计算边界:
var boundary = Math.random().toString().substr(2);
Run Code Online (Sandbox Code Playgroud)
但我仍然有一个错误:multipart: NextPart: EOF
所以你如何计算边界?我阅读了规范https://html.spec.whatwg.org/multipage/forms.html#multipart/form-data-encoding-algorithm,发现边界是由编码文件的算法计算的,在我的例子中是FormData,FormData API没有公开获取边界的方法,但我发现multipart/form-data
如果你没有指定它,浏览器会自动添加Content-Type 和边界,所以我从fetch
调用中删除了header对象现在它终于奏效了!
归档时间: |
|
查看次数: |
5634 次 |
最近记录: |