Vuejs post request to flask server, change url and return raw json

Question

I have a server Flask, written in Python:

# configuration
DEBUG = True
UPLOAD_FOLDER = './uploads/'

# instantiate the app
app = Flask(__name__)
app.config.from_object(__name__)

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER   

# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})

#Upload
@app.route('/')
@app.route('/api/uploadFile',methods=['POST'])
def uploadFile():
    response_object = {'status': 'success'}
    response_object['message'] = 'Caricamento effettuato con successo'
    file = request.files['file']
    filename = secure_filename(file.filename)
    file.save(os.path.join(app.config['UPLOAD_FOLDER'],filename))
    return jsonify(response_object)
    
# sanity check route
@app.route('/ping', methods=['GET'])
def ping_pong():
    return jsonify('pong')

if __name__ == '__main__':
    app.run()

I have a Vuejs component that make upload of a file:

<template>
  <div>
    <form action = "http://localhost:5000/api/uploadFile" method = "post" enctype="multipart/form-data">
      <input type="file" id="file_id" name="file" v-on:change="onFileChange"  value="Choose file" />
      <button class="btn btn-success" @click="upload">Upload</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'UploadFile',
  data() {
    return {
      file: null,
    };
  },
  methods: {
    created() {
      this.getBooks();
    },
    onFileChange(e) {
      const files = e.target.files || e.dataTransfer.files;
      if (!files.length) { return; }
      this.createFile(files[0]);
    },
    createFile(file) {
      const reader = new FileReader();
      const vm = this;
      reader.onload = (e) => {
        vm.file = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    upload() {
      const path = 'http://localhost:5000/';
      const data = new FormData();
      data.append('file', document.getElementById('file').files[0]);
      axios.post('${path}/api/uploadFile', data).then(function (response) {
        console.log(response)
      });
    },
  },
};
</script>

All it's working correctly (the upload works fine), but the response of axios.post call doesn't appear in console: The browser show me this:

For the image that show the problem click here 1

How can i resolve this situation? Many thanks for your help

Answer 1

In your template file input has id="file_id" but in your function you call

data.append('file', document.getElementById('file').files[0]);

Change to document.getElementById('file_id').files[0])