I try to write the web app with golang and vue.js.
On one of pages there is a form which sends uploaded files to server.
Page:
<template>
<Container>
<div class="content">
<h1>
Upload files
</h1>
<div class="forms">
<FileForm v-bind:files="files['Model']" name="Model" v-on:upload="upload_model" v-on:submit="submit_model">
</FileForm>
</div>
</div>
</Container>
</template>
<script>
import axios from 'axios'
import Container from '@/components/Container.vue'
import FileForm from '@/components/FileForm.vue'
export default {
name: 'App',
data: function() {
return {
files: {},
}
},
components: {
Container,
FileForm
},
methods: {
upload_model: function(file) {
this.files['Model'] = file
},
submit_model: function() {
let formData = new FormData();
formData.append('Model', this.files['Model']);
axios.put('http://' + document.location.host + '/api/upload_model', formData)
}
},
mounted () {
}
}
</script>
Form component:
<template>
<div class="FileForm" v-bind:name="name">
<label class="FileFormLabel">
{{ name }}:
<input type="file" files="files" v-on:change="fileUpload" v-bind:name="name"/>
</label>
<button class="SubmitBtn" v-on:click="submit">
Submit
</button>
</div>
</template>
<script>
export default {
name: 'FileForm',
props: ["value", "name"],
data: function() {
return {
files: [],
}
},
methods: {
fileUpload: function(event) {
this.$emit("upload", [event.target.files[0]])
},
submit: function() {
this.files = []
this.$emit("submit")
},
},
}
</script>
golang server:
import (
"fmt"
"io/ioutil"
"encoding/json"
"net/http"
"github.com/go-chi/chi"
"html/template"
// "regexp"
// "image/jpeg"
"os"
// "image"
// "bytes"
"strconv"
"time"
)
var templates = template.Must(template.ParseFiles(
"../frontend/upload.html"))
...
func api_upload_model(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "multipart/form-data")
r.ParseMultipartForm(50 << 20)
file, handler, err := r.FormFile("Model")
if err != nil {
fmt.Println("Error Retrieving the File")
fmt.Println(err)
return
}
...
}
func main() {
router := chi.NewRouter()
router.Put("/api/upload_model", api_upload_model)
...
fileServer = http.FileServer(http.Dir("../frontend/js"))
router.Handle("/js/*", http.StripPrefix("/js/", fileServer))
http.ListenAndServe(":8080", router)
}
I use PUT request and I put 'Model' as name everywhere but what I got is:
Error Retrieving the File
http: no such file
What should I do to finally retrieve my file?
P.S.
Added
fmt.Println("123")
for key := range r.MultipartForm.File {
fmt.Println("321")
fmt.Println(key)
}
And got
123
Error Retrieving the File
http: no such file
Does this mean that FormFile is empty? Why?!
P.P.S.
fmt.Println(r.FormValue("Model"))
gives
[object File]
So, vue writes file not to FormFile but to FormValue?
P.P.P.S. DumpRequest returns:
POST /api/upload_model HTTP/1.1
Host: XXX
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.5
Connection: keep-alive
Content-Length: 183
Content-Type: multipart/form-data; boundary=---------------------------3828442650922976093625228202
Dnt: 1
Origin: XXX
Referer: XXX
User-Agent: XXX
-----------------------------3828442650922976093625228202
Content-Disposition: form-data; name="Model"
[object File]
-----------------------------3828442650922976093625228202--
And in browser request looks like this: https://imgur.com/fN1eE5S.png
