时间戳

首页 > 解决方案 > 如何使用flask-python通过axios发送图像？

javascript - 如何使用flask-python通过axios发送图像？

问题描述

我正在尝试使用 axios get 方法发送图像

我已经尝试过使用来自 axios 的发布请求

HTML

  <div>
    <form id="upImage" enctype="multipart/form-data">
      <input type="file" id="file" name="file">
      <input type=submit value=Upload onclick="uploadImage()">
      </form>

  </div>

    function uploadImage() {

      let image = $('#file').get(0);
      var formData = new FormData();
      formData.append('file', image.files[0]);
      axios({
        method: "post",
        url: "/imgUpload",  
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(function (response) {
          response_data = response.data["img_data"];
      });
    };

Python

    @app.route('/imgUpload', methods=['POST'])
    def upload_image():
        file = request.files['file']
        filename = secure_filename(file.filename)
        file.save(os.path.join('/home/user/images', filename))
        return return jsonify({"img_data":102})

这种方法从postto的变化get给出了空文件。

    function uploadImage() {

      let image = $('#file').get(0);
      var formData = new FormData();
      formData.append('file', image.files[0]);
      axios({
        method: "get",
        url: "/imgUpload",  
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(function (response) {
          response_data = response.data["img_data"];
      });
    };



  'KeyError: 'file' and file will be empty.

如何使用来自 axios 的 get 请求复制相同的过程？

标签： javascriptjqueryflaskaxiosmultipartform-data

解决方案

要发送图像，您必须使用 axios post http 请求并随请求发送图像数据。虽然不清楚您希望图像来自哪里以及上传到哪里。但这将是您需要将图像上传到后端服务器并获得响应的 axios 发布请求代码。

axios.post('/send_image',{file: 'test.jpeg'},{ headers: {
   'Content-Type': 'multipart/form-data'
  }}
}).then(function (response) {
    console.log(response.data);
});

推荐阅读