如何使用 axios post 图像？

Question

这是我的尝试，但没有用。

我在后端遇到错误：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):

Answer 1

formData.append('file', image);

您需要post在输入元素中选择文件，而不是输入元素本身。

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

如何使用 axios post 图像？

How to post image with axios?

javascript

multipartform-data

flask

axios