axios文件上传flask

原创

mob649e816138f5 2024-04-01 04:22:03 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e816138f5的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现“axios文件上传flask”教程

第一步：了解整体流程

首先，我们需要明白整个文件上传过程的流程。下面是一张简单的甘特图，展示了文件上传的各个步骤及其顺序。

gantt
    title 文件上传流程
    section 上传准备
    准备前端页面           :a1, 2022-01-01, 1d
    编写后端接口           :a2, after a1, 2d
    section 文件上传
    前端调用axios上传文件  :a3, after a2, 1d
    后端接收并保存文件     :a4, after a3, 2d

第二步：具体操作步骤

1. 准备前端页面

在前端页面中添加一个文件上传组件，让用户可以选择要上传的文件。

```javascript
<input type="file" id="fileInput">


#### 2. 编写后端接口

在Flask中编写一个接口，用于接收前端上传的文件并保存。

```markdown
```python
# 导入Flask框架
from flask import Flask, request, jsonify
import os

app = Flask(__name__)

# 文件上传接口
@app.route('/upload', methods=['POST'])
def upload_file():
    file = request.files['file']
    file.save(os.path.join('uploads', file.filename))
    return jsonify({'message': '文件上传成功'})

if __name__ == '__main__':
    app.run()


#### 3. 前端调用axios上传文件

使用axios向Flask后端发送文件上传请求。

```markdown
```javascript
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);

axios.post('/upload', formData)
    .then(response => {
        console.log(response.data.message);
    })
    .catch(error => {
        console.error(error);
    });


#### 4. 后端接收并保存文件

在Flask后端接口中接收文件并保存到指定目录。

#### 类图

```mermaid
classDiagram
    class Flask {
        -app
        +run()
    }
    class request
    class jsonify