Axios服务端发送图片文件给flask服务器

767 阅读1分钟

这是我参与2022首次更文挑战的第2天,活动详情查看:2022首次更文挑战

需求

最近在做一个图片识别的系统,后端主要是采用Node,识别模块是Python,现在就有一个问题就是需要把图片从前端传到Node再由Node转发给Python。Node侧选用的是axios发送请求,Python侧则使用Flask来接受请求。

实现过程

  • Node侧

首先安装依赖

npm i axios form-data --save

除了axios外还要安装一个form-data的包来模拟浏览器的Form表单数据。文件传送本质还是发送二进制文件。

   const form = new FormData();
   const filePath = path.join(__dirname, "../../public/xxx.jpg");
   // 给一个filename,让接收端能根据filename保存图片
   const config = { filename: "xxx.jpg", contentType: "multipart/form-data" };
   // 第一个参数是flask接受文件时的标识,一定要有
   // 第三个参数flask要求文件上传时一定要把请求头的contentType设置为multipart/form-data
   form.append("xxx", fs.createReadStream(filePath), config);
   const formHeaders = form.getHeaders();
   axios.post("xxHOST/xxAPI", form, {
     headers: {
       ...formHeaders,
     },
   });
  • Python侧 安装依赖

pip3 install flask

from flask import Flask,request,send_from_directory
import os
# 设置一个文件上传路径,保存上传过来的图片
app.config['UPLOAD_PATH'] = os.path.join(app.root_path, 'uploads')
# 只接受POST方法
@app.route('/xxx', methods=['POST'])
def upload():
    # 这里的【xxx】就是在前面我们说的标识,没有这个标识就没法从请求对象中找到我们指定的图片
    xxx = request.files['xxx']
    # 路径, 文件名来保存图片
    xxx.save(os.path.join(app.config['UPLOAD_PATH'], xxx.filename))
    return '上传成功'
if __name__ == "__main__":
    app.run(debug=True)

结尾

到此为止整个过程就跑通了,这种需求可能实现的场景比较少,希望能帮组到大家