在现代Web应用中，文件上传和显示功能是常见的需求。本文将介绍如何使用Flask作为后端和Flutter作为前端来实现一个文件上传到Azure Blob Storage并在前端显示的完整流程。
环境准备
首先，我们需要确保以下环境配置：
- Python 3.7+
- Flutter SDK
- Azure存储账户
- 安装必要的Python库：
flask,flask_cors,azure-storage-blob
pipinstallflask flask_cors azure-storage-blobFlask后端配置
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}),2003. 生成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'));}}调试与问题解决
- 空白页面问题：检查
fileUrl是否正确接收到了URL，确保Azure存储配置正确，CORS设置正确。 - PDF显示问题：考虑使用
flutter_pdfview或syncfusion_flutter_pdfviewer，注意这些库的平台支持情况。
通过上述步骤，我们可以构建一个功能完备的文件上传和显示系统，利用Flask和Flutter的优势实现跨平台应用的开发。
