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

Question

我有一个用 Python 编写的服务器 Flask：

# 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()

我有一个上传文件的 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',&nbsp;document.getElementById('file').files[0]);更改为 document.getElementById('file_id').files[0])