My interface code is as follows:

Apply.vue:

<template>
  <div>
    <div >
      <form action="">
        <div >
          <h3>{{jobinfos.position}}</h3>
          <div >
            <h6>Upload CV:</h6>
            <div >
              <button
                for="real-file"
                @click="onFileChange"
                type="button"
                id="custom-button"
              >
              </button>
              <input
                id="real-file"
                type="file"
                style="display: none"
                @change="fileName"
                name="image"
              />
              <div >
                <h5 v-if="uploadedFileName" id="custom-text">
                  {{ uploadedFileName }}
                </h5>
                <h5 v-else id="custom-text">Bạn chưa chọn file</h5>
                <img
                  v-if="uploadedFileName"
                  @click="deleteFile"
                  src="../../assets/recruit/delete.svg"
                  alt=""
                />
              </div>
            </div>
          </div>
          <a href="./succes.html">
            <button @click="submitFile" >Submit</button>
          </a>
        </div>
      </form>
    </div>
  </div>
</template>

Here is the script that I am working on but it can't work yet, when I click submit it shows the error: "POST http://localhost:8080/apply/1?pdf=myCV.pdf 404 (Not) Found)"

<script>
import axios from 'axios'
export default {
  props: {
    id: String,
  },
  data() {
    return {
      uploadedFileName: null,
      fileCV: null,
      jobinfos: [],
    };
  },
    mounted() {
    this.getdetail();
  },
  methods: {
    onFileChange() {
      document.getElementById("real-file").click();
    },
    fileName(e) {
      this.uploadedFileName = e.target.files[0].name;
      this.fileCV = e.target.files[0]

    },
    deleteFile() {
      this.uploadedFileName = null;
    },
    submitFile(){
      const formData = new FormData();
       formData.append('files', this.uploadedFileName);
       axios
        .post(`http://localhost:1337/upload/`, formData)
        .then((response) => {
          response.data.files; // binary representation of the file
          response.status; // HTTP status
        })
        .catch((e) => {});
    },
    async getdetail() {
      const id = this.$route.params.id;
      await axios
        .get(`http://localhost:1337/jobinfos/`   id)
        .then((response) => {
          this.jobinfos = response.data;
        })
        .catch((e) => {});
    },
  },
};
</script>

As a newbie to Vue and axios, I don't know how to handle it correctly, Hope to get help from everyone, thanks a lot

CodePudding user response：

Seems to be a html problem, not a vue problem. Your button fires the submitFile function and then submits the form to the current page. You also have the the button inside the a tag.

    <form action=""> ...
    <a href="./succes.html">
            <button @click="submitFile" >Submit</button>
    </a>

First - if you do not want to submit the form - add type="button" to the button tag

     <button type="button" @click="submitFile" >Submit</button>

and then remove the a tag around the button. The submitFile function should call the correct post method and vue should update the data accordingly