vue3 + fastapi 实现选择目录所有文件自定义上传到服务器-阿里云开发者社区

<script  lang="ts" setup>
import { ref,reactive,computed } from 'vue';
import { InboxOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { uploadFile,uploadUrl } from "../../service/gpt/index";
import { UploadOutlined } from '@ant-design/icons-vue';
const state:any=reactive({
    fileList:[],
    loading:false,
    text:'',
    dirList:[],
    dirPath:'',
    customFile:null,
    activeKey:'1',
    movieUrl:''
});
const upUrl=async ()=>{
    state.loading=true
    try{
        const res=await uploadUrl({
            url:state.movieUrl
        })
        console.log('res',res)
    }
    catch (e) {
        message.error(JSON.stringify(e))
    }
    finally {
        setTimeout(()=>{
            state.loading=false
        },200)
    }
}
const remove=(e:any)=> {
  console.log('drop file',e);
    state.fileList=[]
}
const removeDir=(e:any)=>{
    state.dirList=state.dirList.filter((file:any)=>file.uid!==e.uid)
}
const customRequesHandle=(e:any)=>{
    console.log(e,'custom')
}
const beforeUpload = (file:any) => {
    console.log('file before',file)
    state.fileList=[file]
    return false;
};
const beforeUploadDir = (file:any) => {
    state.dirList.push(file)
    return false;
};
const uploadSingleFile= async ()=>{
    state.loading=true
    console.log(typeof state.fileList[0],'file 类型')
    try{
        const formData=new FormData();
        formData.append('file',state.fileList[0])
        const res=await uploadFile(formData)
        console.log('res',res)
    }catch (e) {
        message.error(JSON.stringify(e))
    }
    finally {
        setTimeout(()=>{
            state.loading=false
        },200)
    }
}
const upBtnDisabled=computed(()=>{
    return state.fileList.length===0
})
    const change=(e:any)=>{
    console.log('change e',e)
    }
const upDir=async ()=>{
    if(state.dirList.length===0){
        return message.warning('请选择文件夹！')
    }
    state.loading=true
    const paramsData:any={
        dirList:state.dirList,
        dirPath:state.dirPath,
    }
    try{
        state.dirList.forEach(async (file:any)=>{
            try{
                const formData=new FormData();
                formData.append('file',file)
                const res=await uploadFile(formData)
                console.log('res',res)
            }catch(r){
                message.error(JSON.stringify(r))
            }
        })
    }catch (e) {
        message.error(JSON.stringify(e))
    }
    finally {
        setTimeout(()=>{
            state.loading=false
        },200)
    }
}
const previewDirFile=async (file:any)=>{
    return new Promise(resolve=>resolve(false))
}
</script>
<template>
    <div>
        <a-spin :spinning="state.loading" tip="upload...">
        <div class="header-tools">
        </div>
            <a-tabs v-model:activeKey="state.activeKey">
                <a-tab-pane key="1" tab="上传文件">
                    <div>
                        上传文件夹
                       <div style="margin: 5px;border: 1px dotted #1890ff;padding: 20px">
                           <div style="margin: 10px 0;max-height: 200px;overflow: auto">
                               <a-upload :before-upload="beforeUploadDir" v-model:file-list="state.dirList"
                                         list-type="picture"
                                         @remove="removeDir" directory>
                                   <a-button>
                                       <upload-outlined></upload-outlined>
                                       上传文件夹
                                   </a-button>
                               </a-upload>
                               <div >
                               </div>
                           </div>
                           <div style="margin:10px 0">
                               <a-button type="primary" block @click="upDir" :disabled="state.dirList.length===0" >点击开始解析文件夹</a-button>
                           </div>
                       </div>
                        上传单文件
                        <div style="margin: 5px;border: 1px dotted #1890ff;padding: 20px">
                        <div>
                            <a-upload-dragger
                                    :file-list="state.fileList"
                                    list-type="picture"
                                    :multiple="false"
                                    :before-upload="beforeUpload"
                                    @remove="remove"
                                    @change="change"
                            >
                                <p class="ant-upload-drag-icon">
                                    <inbox-outlined></inbox-outlined>
                                </p>
                                <p class="ant-upload-text">点击上传或者拖拽到这</p>
                                <p class="ant-upload-hint">
                                    选择文件
                                </p>
                            </a-upload-dragger>
                        </div>
                        <div style="margin:10px 0">
                            <a-button type="primary" block @click="uploadSingleFile" :disabled="upBtnDisabled">点击开始上传文件</a-button>
                        </div>
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-spin>
    </div>
</template>
<style>
    .header-tools{
        text-align: center;
        font-size: 24px;
        font-weight: bold;
    }
    .content-box{
    }
    .des{
        margin:20px 0;
    }
</style>

💖 调整请求content-type传递formData

axios封装

import axios from "axios";
// 实例
const createInstance = (baseURL:string)=>{
    return axios.create({
        baseURL:baseURL,
        timeout: 10000,
        headers: {'X-Custom-Header': 'yma16'}
    })
};
// @ts-ignore
const http:any=createInstance('');
// 添加请求拦截器
http.interceptors.request.use(function (config:any) {
    // 在发送请求之前做些什么
    return config;
}, function (error:any) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response:any) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error:any) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});
// 文件上传
const createUploadInstance = (baseURL:string)=>{
    return axios.create({
        baseURL:baseURL,
        timeout: 10000,
        headers: {"Content-Type": "multipart/form-data"}
    })
};
// @ts-ignore
const uploadHttp:any=createUploadInstance('');
// 添加请求拦截器
uploadHttp.interceptors.request.use(function (config:any) {
    // 在发送请求之前做些什么
    return config;
}, function (error:any) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
uploadHttp.interceptors.response.use(function (response:any) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error:any) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});
export {http,uploadHttp};

service对接后端

import {uploadHttp} from "../../http/index";
export const uploadFile: any = (formData: any) => {
    return uploadHttp.post("/api/uploadFile/action", formData);
};

⭐后端接口实现

安装环境

pip install uvicorn
pip install fastapi
pip install python-multipart

上传单个文件接口实现：

from fastapi import FastAPI, status, File, Form, UploadFile
from fastapi import FastAPI, status, File, Form, UploadFile
from fastapi.middleware.cors import CORSMiddleware
import os
app = FastAPI()
# 跨域配置
origins = [
    "http://localhost:3000",
]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
@app.get("/api")
async def root():
    return {"data": "fast api!"}
# 上传文件
@app.post("/api/uploadFile/action")
async def create_file(
    file:UploadFile
):
    writeBytes('./media',file)
    return {
        'code':200,
        "msg":'success'
    }
# 将file写入dirs目录文件
def writeBytes(dirs,file):
    bytesFile=file.file.read()
    filename=file.filename
    if not os.path.exists(dirs):
        os.makedirs(dirs)
    with open(dirs+'/'+ filename, "wb") as f:
        f.write(bytesFile)

uvicorn运行fastapi

uvicorn server.main:app --reload --port 7777

💖 swagger文档测试接口

swagger文档地址：

http://ip:port/docs

上传成功！

⭐前后端实现效果

💖 上传单个文件

💖 上传目录文件

上传目录文件的接口实现：

file为二进制文件
dir为目录名称
name为完整的文件名称

# 上传目录文件
@app.post("/api/uploadDirFile/action")
async def uploadDirFile(
    file:UploadFile,
    dir:str=Form(),
    name:str=Form()
):
    print(dir,'dir_____________')
    writeBytes('./media/'+dir,name,file)
    return {
        'code':200,
        "msg":'success'
    }
# 将二进制数据写入目录文件
def writeBytes(dirs,name,file):
    bytesFile=file.file.read()
    filename=name
    if not os.path.exists(dirs):
        os.makedirs(dirs)
    with open(dirs+'/'+ filename, "wb") as f:
        f.write(bytesFile)

⭐总结

文件上传注意事项

前端：

请求头配置 headers: {"Content-Type": "multipart/form-data"}
参数传递使用new FormData()

后端：

接受参数使用 Uploadfile格式
解析文件内容名称包括类型按格式写入文件

multipart/form-data

multipart/form-data 是一种常用的 HTTP 请求方法，通常用于上传文件或大量数据。它将请求的数据分成多个部分（part），每一部分使用一个 boundary 分隔符来分开，每个部分包含一个头部和一个内容体，头部描述了该部分的属性，如数据类型、数据编码等。在 HTTP 消息体中，每个部分之间必须以 “–boundary\r\n” 开始，以 “–boundary–\r\n” 结束，即在结尾处添加额外的 “–” 标记。在客户端使用该方法请求时，需要明确指定请求头中的 Content-Type 为 multipart/form-data。服务端接收到该请求后，需要解析出每个部分中的请求数据。

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！

vue3 + fastapi 实现选择目录所有文件自定义上传到服务器

⭐前言

💖 技术栈选择

⭐前端页面搭建

💖 调整请求content-type传递formData

⭐后端接口实现

💖 swagger文档测试接口

⭐前后端实现效果

💖 上传单个文件

💖 上传目录文件

⭐总结

⭐结束

热门文章

最新文章

相关课程

相关电子书

相关实验场景