javascript - Network error when sending form-data to Strapi using Axios

Question

I'm having some problem when trying to send files using Axios, Vue.js and Strapi for Backend api.
I'm behind a proxy, maybe this can be a problem?
My form html:

 <form>
      <div class="mb-4">
        <label for="titleInput" class="form-label">Título do vídeo</label>
        <input
          v-model="title"
          type="text"
          class="form-control"
          id="titleInput"
        />
      </div>
      <div class="mb-4">
        <label for="thumbnailInput" class="form-label"
          >Thumbnail do Vídeo</label
        >
        <input
          @change="onFileSelected"
          type="file"
          class="form-control"
          id="thumbnailInput"
          aria-describedby="thumbnailHelp"
          required
        />

        <div id="emailHelp" class="form-text">
          Por favor, selecione a imagem de destaque do vídeo.
        </div>
      </div>
      <!-- <div class="mb-4">
        <label for="thumbnailInput" class="form-label">Vídeo</label>
        <input
          @change="upload(video)"
          type="file"
          class="form-control"
          id="thumbnailInput"
          aria-describedby="videoHelp"
          required
        />

        <div id="emailHelp" class="form-text">
          Por favor, selecione o arquivo de vídeo que deseja utilizar.
        </div>
      </div> -->
      <button @click="onUpload" type="submit" class="btn btn-primary">
        Enviar
      </button>
    </form>

My Axios POST:

export default {


name: "home",
  data() {
    return {
      title: "",
      selectedFile: null,
      // base_url: "http://localhost:1337/videos/",
      loading: true,
      errored: false,
    };
  },
  // mounted() {

  // },
  methods: {
    onFileSelected(event) {
      // console.log(event);
      this.selectedFile = event.target.files[0];
    },
    async onUpload() {
      try {
        const fd = new FormData();
        fd.append("image", this.selectedFile, this.selectedFile.name);
        await axios.post("http://localhost:1337/videos", fd).then((res) => {
          console.log(res);
        });
      } catch (error) {
        console.log(error);
      }
    },
  },
};

I made a trycatch and got a network error:

Error
?
columnNumber: 15
?
config: {…}
??
adapter: function xhrAdapter()
??
data: FormData {  }
??
headers: Object { Accept: "application/json, text/plain, */*" }
??
maxBodyLength: -1
??
maxContentLength: -1
??
method: "post"
??
timeout: 0
??
transformRequest: Array [ transformRequest() ]
??
transformResponse: Array [ transformResponse() ]
??
url: "http://localhost:1337/videos"
??
validateStatus: function validateStatus()
??
xsrfCookieName: "XSRF-TOKEN"
??
xsrfHeaderName: "X-XSRF-TOKEN"
??
__proto__: Object { … }
?
fileName: "http://localhost:8080/js/chunk-vendors.js line 154 > eval"
?
isAxiosError: true
?
lineNumber: 16
?
message: "Network Error"
?
request: XMLHttpRequest
??
mozAnon: false
??
mozSystem: false
??
onabort: function handleAbort()
??
onerror: function handleError()
??
onload: null
??
onloadend: null
??
onloadstart: null
??
onprogress: null
??
onreadystatechange: function handleLoad()
??
ontimeout: function handleTimeout()
??
readyState: 4
??
response: ""
??
responseText: ""
??
responseType: ""
??
responseURL: ""
??
responseXML: null
??
status: 0
??
statusText: ""
??
timeout: 0
??
upload: XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, … }
??
withCredentials: false
??
__proto__: XMLHttpRequestPrototype { open: open(), setRequestHeader: setRequestHeader(), send: send(), … }
?
response: undefined
?
stack: "createError@webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15
handleError@webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:84:14
"
?
toJSON: toJSON()
??
length: 0
??
name: "toJSON"
??
prototype: Object { … }
??
__proto__: function ()
?
__proto__: {…}
??
constructor: function Error()
??
message: ""
??
name: "Error"
??
stack: Getter & Setter
??
toSource: function toSource()
??
toString: function toString()
??
__proto__: Object { … }  

I'm making a post request in the wrong way? Really can't find where is the problem... My Strapi and Vue is running on localhost. :1337 is Strapi and :8080 is Vue.js I can POST title using Postman, but I can't send any file (error 400):

 {
    "statusCode": 400,
    "error": "Bad Request",
    "message": "When using multipart/form-data you need to provide your data in a JSON 'data' field."
}

Answer 1

I think it is related to axios post request header. You should clearly include content-type as multipart/form-data for uploading files.

axios
  .post(`/upload`, _formData, {
  headers: { "Content-Type": "multipart/form-data" },
  })
  .then((res) => {})
  .catch((err) => {
   console.log(err);
  });