Javascript 使用JQuery和Python发送图像

通过HTML前端将照片上传到后端Python的最佳实践是什么

我相信信息没有被发送出去

我制作了Python代码来接收，但是我无法在后端接收图像，它可能是空的

Python后端

@app.route('/api/uploadFoto', methods=['POST'])
def enviaFoto():

  #POST /api/uploadFoto

  ACCESS_KEY_ID = 'MINHA_KEY'
  ACCESS_SECRET_KEY = 'MINHA_SECRET_KEY'
  BUCKET_NAME = 'BUCKET
  SOURCE_FILENAME = request.files

  print(SOURCE_FILENAME)

  S3 = boto3.client('s3')

  S3.upload_fileobj(SOURCE_FILENAME, BUCKET_NAME, SOURCE_FILENAME)

  url = "https://" + BUCKET_NAME + ".s3.amazonaws.com/" + SOURCE_FILENAME + ""

  response = {'status': 'sucesso', 'urlFoto': '{}'.format(url)}

  response_pickled = jsonpickle.encode(response)

  return Response(response=response_pickled, status=200, mimetype="application/json")

打印中（源文件名）python返回：ImmutableMultiDict（[]）

JQuery前端

$(function() {
  $('#upload-file-btn').click(function() {
    var input = document.querySelector('input[type=file]').files[0]

    formData = input.name

    axios({
      method: 'post',
      url: 'http://localhost:5000/api/uploadFoto',
      headers: {
        "Access-Control-Allow-Origin": "http://localhost",
        "Access-Control-Allow-Headers": "Authorization", 
        "Access-Control-Allow-Methods": "GET, POST, OPTIONS, PUT, PATCH, DELETE"
      },
      data: formData
    });

  });
});

---

为什么要发送input.name？如果你想分享图片，你应该这样做

var formData = new FormData();
formData.append('my_file', this.file, this.file.name);

axios({
    method: 'POST',
    url: 'whatever',
    data: formData,
}).then..

---

当然，可以根据文件输入中的任何值更改this.file。

也许您应该发送文件本身，而不是文件名。我在b64中更改了图像的代码，在后端也遇到了同样的错误。请暂时忘记后端中的代码刷新。您需要确保从前端正确发送文件。在chrome控制台的“网络”选项卡中检查是否发送了头文件。POST/api/uploadFoto HTTP/1.1主机：localhost:5000连接：保持活动内容长度：23747访问控制允许源文件：Accept:application/json，text/plain，/Origin:null访问控制允许头文件：授权用户代理：Mozilla/5.0（Linux；Android 6.0；Nexus 5 Build/MRA58N）AppleWebKit/537.36（KHTML，像Gecko）Chrome/78.0.3904.97 Mobile Safari/537.36访问控制允许方法：获取、发布、选项、放置、修补、删除内容类型：多部分/表单数据；边界=---WebKitFormBoundaryrRSngod9XBOnl6iw Sec获取站点：跨站点Sec获取模式：cors