如何使用axios发布图像?

时间:2019-07-09 14:04:55

标签: javascript flask axios multipartform-data

那是我的尝试,但是不起作用。

我在后端file = request.files['file']wrap.<locals>.newcls: 400 Bad Request: KeyError: 'file'上出错

页面上的我的代码以加载图像

$("#image-selector").change(function () {
  let reader = new FileReader();
  reader.onload = function () {
    let dataURL = reader.result;
    $("#selected-image").attr("src", dataURL);

发送

  let image = $('#selected-image').get(0);

  var formData = new FormData();
  formData.append('file', image);

  axios.post('/file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(res => {
    console.log("TEST:", res.data);
  })
  .catch(error => {
    console.log(error);
  });

那是python / flask后端代码

@app.route('/file', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['file']
        if file and allowed_file(file.filename):

1 个答案:

答案 0 :(得分:1)

formData.append('file', image);

您需要发布在输入元素中选择的文件,而不是输入元素本身。

formData.append('file', image.files[0]);