Vuejs 向烧瓶服务器发送请求，更改 url 并返回原始 json

Question

我有一个用 Python 编写的服务器 Flask：# configurationDEBUG = TrueUPLOAD_FOLDER = './uploads/'# instantiate the appapp = Flask(__name__)app.config.from_object(__name__)app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER   # enable CORSCORS(app, resources={r'/*': {'origins': '*'}})#[e-mail]('/')@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 [e-mail]('/ping', methods=['GET'])def ping_pong():    return jsonify('pong')if __name__ == '__main__':    app.run()我有一个上传文件的 Vuejs 组件：<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);    },一切正常（上传工作正常），但 axios.post 调用的响应没有出现在控制台中！浏览器告诉我这个：对于显示问题的图像，请单击此处1我该如何解决这种情况？非常感谢您的帮助

Answer 1

在您的模板文件输入中有 id="file_id" 但在您调用的函数中

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

更改为 document.getElementById('file_id').files[0])