app公司是做什么的,如何优化网站首页代码,中国城乡建设部网站房贴文件,网站中文名称注册FastAPI实现文件上传下载 1.后端FastAPI2.后端html3.效果 最近的项目需求#xff0c;是前端vue#xff0c;后端fastAPI#xff0c;然后涉及到图像的消息发送#xff0c;所以需要用fast写文件上传下载的接口#xff0c;这里简单记录一下。 1.后端FastAPI
import os.path
i… FastAPI实现文件上传下载 1.后端FastAPI2.后端html3.效果 最近的项目需求是前端vue后端fastAPI然后涉及到图像的消息发送所以需要用fast写文件上传下载的接口这里简单记录一下。 1.后端FastAPI
import os.path
import uvicorn
from fastapi import FastAPI, File, UploadFile
from fastapi.responses import FileResponse
from fastapi.middleware.cors import CORSMiddleware
app FastAPI()
app.add_middleware(# 解决跨域问题CORSMiddleware,allow_origins[*], allow_credentialsTrue,allow_methods[*],allow_headers[*],
)
#app.get(/)#测试接口
#async def hello():
# return {ret: hello}
app.post(/uploadfile/)#前端上传的文件会放在文件目录下的uploaded_files目录下
async def create_upload_file(file: UploadFile File(...)):print(file)if not os.path.exists(uploaded_files):os.mkdir(uploaded_files)with open(fuploaded_files/{file.filename}, wb) as f:f.write(await file.read())return {filename: file.filename}app.get(/downloadfile/{filename})#前端会传递一个文件名然后从后端文件目录的downloadfile目录下找到这个文件去下载
async def download_file(filename: str):directory_path f{os.path.dirname(__file__)}/downloadfile/file_path os.path.join(directory_path, filename)print(file_path)return FileResponse(file_path, media_typeapplication/octet-stream, filenamefilename)
if __name__ __main__:uvicorn.run(upload:app, host127.0.0.1, port18005, reloadFalse)2.后端html
我用postman测试后端没问题后用html搞了一个简单的前端实现这个功能这里从后端下载文件到前端时需要前端给一个文件名这个文件名一定要是后端/downloadfile/文件夹下的文件名否则下载不到文件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文件上传与下载/title
/head
bodyh1文件上传与下载d/h1!-- 文件上传表单 --
form iduploadForm enctypemultipart/form-datainput typefile idfileInput namefile accept.txtbutton typebutton onclickuploadFile()上传/button
/form!-- 文件下载按钮 --
input typetext idfileNameInput placeholder输入后端downloadfile文件夹下的文件名
button onclickdownloadFile()下载/buttonscriptasync function uploadFile() {const fileInput document.getElementById(fileInput);const file fileInput.files[0];if (file) {const formData new FormData();formData.append(file, file);try {const response await fetch(http://127.0.0.1:18005/uploadfile/, {method: POST,body: formData});if (response.ok) {alert(文件上传到后端upload_files目录下成功!);} else {alert(文件上传失败.);}} catch (error) {console.error(error);alert(文件上传失.);}} else {alert(请选择需要上传的文件.);}}async function downloadFile() {// 获取输入框中的文件名const fileName document.getElementById(fileNameInput).value;try {// 使用 fetch 请求下载文件const response await fetch(http://127.0.0.1:18005/downloadfile/${fileName});if (response.ok) {// 将文件转换为 Blobconst blob await response.blob();// 创建一个链接并设置下载属性const link document.createElement(a);link.href window.URL.createObjectURL(blob);link.download fileName;// 模拟点击下载链接link.click();} else {alert(从后端downloadfile目录里下载此文件失败.);}} catch (error) {console.error(error);alert(下载文件出错.);}
}/script
/body
/html
3.效果
