Vue+Fastapi 上传文件简单示例-后续：多文件上传

本文的上一篇是 Vue+Fastapi 上传文件的简单示例 ，因为这篇文章是单文件上传，但是很多情况下需要传输多个文件，所以多文件上传也是必不可少的。

1 思路

分为前端和后端，前端使用Vue，后端采用FastaApi

2 实现

2.1 多文件上传后端

接受前端传来的文件，可以是单文件也可以是多文件，返回上传的文件名来判断是否真正的上传完成

from typing import List #重要 from fastapi import FastAPI, File, UploadFile app = FastAPI() @app.post(“/files/“) async def create_files(files: List[bytes] = File(…)): rt_data = {“path”:[]} for file in files: file_data = await file.read() name = save_file(file_data,file.filename,[Your file path]) rt_data[“path”].append(name) return {“file_sizes”: [len(file) for file in files]} @app.post(“/uploadfiles/“) async def create_upload_files(files: List[UploadFile] = File(…)): rt_data = {“path”:[]} for file in files: file_data = await file.read() name = save_file(file_data,file.filename,[Your file path]) rt_data[“path”].append(name) return {“filenames”: [file.filename for file in files]} #这个实现方法和单文件上传唯一区别就是引入了typing模块的List, 该模块仅支持3.5以上版本，作用是进行类型注解。 #下面这个函数用来保存文件 def save_file(filedata,filename,path): with open(path + filename,”wb”) as fp: fp.write(filedata) fp.close() return filename

2.2 文件上传前端

实现办法：创建一个文件选择的Input 同时将其设置为不可见，创建两个按钮，一个代替选择，一个代替上传，首先从原生的input内获取选择的文件列表，保存在data内，使用axios上传时循环将文件append到需要上传的FromData内。具体代码可以参考如下：

    

    

    

        <el-button @click=”addFile”>addFile

        <el-button @click=”uploadFile”>uploadFile

        <input type=”file” ref=”upload_input” multiple style=”display: none;” @change=”select_file”>