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);
    },
    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>

一切正常（上传工作正常），但 axios.post 调用的响应没有出现在控制台中！浏览器告诉我这个：

对于显示问题的图像，请单击此处1

我该如何解决这种情况？非常感谢您的帮助

Answer 1

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

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

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