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内。具体代码可以参考如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <link rel=”stylesheet” href=”https://unpkg.com/element-ui/lib/theme-chalk/index.css”>
</head>
<body>
    <div id=”app”>
        <el-button @click=”addFile”>addFile</el-button>
        <el-button @click=”uploadFile”>uploadFile</el-button>
        <input type=”file” ref=”upload_input” multiple style=”display: none;” @change=”select_file”>
    </div>
</body>
<script src=”https://unpkg.com/vue/dist/vue.js”></script>
<script src=”https://unpkg.com/element-ui/lib/index.js”></script>
<script src=”https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js”></script>
<script>
    new Vue({
        el: ‘#app’,
        data: function () {
            return {
                select_file_data: [],
                target_url: ”
            }
        },
        methods: {
            addFile: function () {
                this.$refs.upload_input.click()
            },
            uploadFile: function () {
                let uploads = new FormData()
                let config = { headers: { “Content-Type”: “multipart/form-data” } }
                if (this.select_file_data != []) {
                    for (let i = 0; i < this.select_file_data.length; i++) {
                        uploads.append({ “files“: this.select_file_data[i]})
                    }
                    axios.post(this.target_url, uploads, config).then(function (res) {
                        console.log(res.data)
                    })
                }
            },
            select_file: function (file) {
                this.select_file_data = file.target.files
                console.log(this.select_file_data)
            }
        }
    })
</script>
</html>

2.3 上传须知

前端上传的文件在添加到FormData 对象的时候名字是什么,后端接收的就必须是什么,类似于我文中加粗标注的地方,否则会出现422报错。
以上就是多文件上传保存的步骤,需要的朋友可以简单参考一下。
——wicos 2020.7.25
暂无评论

发送评论 编辑评论


				
上一篇
下一篇