如何使用 axios 发布图片？答案

【问题标题】：How to post image with axios?如何使用 axios 发布图片？
【发布时间】：2019-07-09 14:04:55
【问题描述】：

这是我的尝试，但它不起作用。

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

【问题讨论】：

标签： javascript flask axios multipartform-data

【解决方案1】：

formData.append('file', image);

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

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

【讨论】：

在 image.files[0] 上我得到：未捕获（承诺中）类型错误：无法读取未定义的属性“0”
#selected-image 是<img>
@cnd — 您使用的 API 是为与 <input type="file"> 一起使用而设计的，因此用户可以选择图像。 <img> 元素仅显示来自 URL 的图像。这不是用户输入的内容（至少不是直接输入的）。也许您想改为发送src URL。
是的，如果我使用let image = $("#image-selector").prop('files')[0]; 会起作用，如果我能以同样的方式使用<img> 吗？只是 img.src 不工作
然后使用图像选择器中的图像。尝试将渲染的预览转换回文件比它值得付出更多的努力。