Flask与Flutter：无缝上传与显示文件-程序员充电站

在现代Web应用中，文件上传和显示功能是常见的需求。本文将介绍如何使用Flask作为后端和Flutter作为前端来实现一个文件上传到Azure Blob Storage并在前端显示的完整流程。

环境准备

首先，我们需要确保以下环境配置：

Python 3.7+
Flutter SDK
Azure存储账户
安装必要的Python库：flask,flask_cors,azure-storage-blob

pipinstallflask flask_cors azure-storage-blob

Flask后端配置

1. 配置Azure存储

我们首先在Flask中配置Azure Blob Storage的连接：

fromazure.storage.blobimportBlobServiceClient,BlobClient,ContainerClient,generate_blob_sas,BlobSasPermissions connect_str='DefaultEndpointsProtocol=CONNECTION_STRING_ETC'container_name="documents"blob_service_client=BlobServiceClient.from_connection_string(conn_str=connect_str)container_client=blob_service_client.create_container(container_name)

2. 定义上传路由

定义一个上传文件的路由，处理文件上传到Azure Blob Storage：

@app.route('/upload',methods=['POST'])defupload_file():if'file'notinrequest.files:returnjsonify({"message":"No file available","status":"fail"}),400file=request.files['file']iffile.filename=='':returnjsonify({"message":"No selected file","status":"fail"}),400iffile:timestamp=datetime.now().strftime('%Y-%m-%d_%H:%M:%S')filename=secure_filename(f"{timestamp}_{file.filename}")blob_client=container_client.get_blob_client(filename)blob_client.upload_blob(file.stream,overwrite=True)file_url=blob_client.urlreturnjsonify({"message":"File uploaded successfully","status":"success","file_url":file_url}),200

3. 生成SAS Token

为了安全地访问文件，我们使用SAS Token来生成临时URL：

@app.route('/upload/<path:filename>',methods=['GET'])defuploaded_file(filename):blob_client=container_client.get_blob_client(filename)sas_token=generate_blob_sas(account_name=blob_service_client.account_name,container_name=container_name,blob_name=filename,account_key=blob_service_client.credential.account_key,permission=BlobSasPermissions(read=True),expiry=datetime.now(datetime.UTC)+timedelta(hours=1))signed_url=f"{blob_client.primary_endpoint}/{container_name}/{blob_client.blob_name}?{sas_token}"returnjsonify({"file_url":signed_url,"status":"success"})

Flutter前端实现

1. 接收文件URL

在Flutter中，我们需要从Flask获取文件的URL并显示：

Future<void>fetchFile()async{setState((){isLoading=true;});finalresponse=awaithttp.get(Uri.parse('http://127.0.0.1:5000/upload/$filename'));if(response.statusCode==200){vardata=jsonDecode(response.body);setState((){fileUrl=data['file_url'];isLoading=false;});}else{throwException('Failed to load file');}}

2. 显示文件

根据文件类型（PDF或图片）选择不同的显示方式：

WidgetbuildFileWidget(){if(isLoading){returnCenter(child:CircularProgressIndicator());}elseif(fileUrl!=null){if(fileUrl!.toLowerCase().endsWith('.pdf')){returnPDF().cachedFromUrl(fileUrl!);}else{returnCachedNetworkImage(imageUrl:fileUrl!,placeholder:(context,url)=>CircularProgressIndicator(),errorWidget:(context,url,error)=>Icon(Icons.error),);}}else{returnCenter(child:Text('File not found'));}}