核心内容摘要
STM32输入捕获实现HC-SR04超声波高精度测距
在现代Web应用中文件上传和显示功能是常见的需求。
本文将介绍如何使用Flask作为后端和Flutter作为前端来实现一个文件上传到Azure Blob Storage并在前端显示的完整流程。
环境准备首先我们需要确保以下环境配置Python
7Flutter SDKAzure存储账户安装必要的Python库flask,flask_cors,azure-storage-blobpipinstallflask flask_cors azure-storage-blobFlask后端配置
配置Azure存储我们首先在Flask中配置Azure Blob Storage的连接fromazure.storage.blobimportBlobServiceClient,BlobClient,ContainerClient,generate_blob_sas,BlobSasPermissions connect_strDefaultEndpointsProtocolCONNECTION_STRING_ETCcontainer_namedocumentsblob_service_clientBlobServiceClient.from_connection_string(conn_strconnect_str)container_clientblob_service_client.create_container(container_name)
定义上传路由定义一个上传文件的路由处理文件上传到Azure Blob Storageapp.route(/upload,methods[POST])defupload_file():iffilenotinrequest.files:returnjsonify({message:No file available,status:fail}),400filerequest.files[file]iffile.filename:returnjsonify({message:No selected file,status:fail}),400iffile:timestampdatetime.now().strftime(%Y-%m-%d_%H:%M:%S)filenamesecure_filename(f{timestamp}_{file.filename})blob_clientcontainer_client.get_blob_client(filename)blob_client.upload_blob(file.stream,overwriteTrue)file_urlblob_client.urlreturnjsonify({message:File uploaded successfully,status:success,file_url:file_url}),
生成SAS Token为了安全地访问文件我们使用SAS Token来生成临时URLapp.route(/upload/path:filename,methods[GET])defuploaded_file(filename):blob_clientcontainer_client.get_blob_client(filename)sas_tokengenerate_blob_sas(account_nameblob_service_client.account_name,container_namecontainer_name,blob_namefilename,account_keyblob_service_client.credential.account_key,permissionBlobSasPermissions(readTrue),expirydatetime.now(datetime.UTC)timedelta(hours
)signed_urlf{blob_client.primary_endpoint}/{container_name}/{blob_client.blob_name}?{sas_token}returnjsonify({file_url:signed_url,status:success})Flutter前端实现
接收文件URL在Flutter中我们需要从Flask获取文件的URL并显示FuturevoidfetchFile()async{setState((){isLoadingtrue;});finalresponseawaithttp.get(Uri.parse(http://
127.
0.
1:5000/upload/$filename));if(response.statusCode
{vardatajsonDecode(response.body);setState((){fileUrldata[file_url];isLoadingfalse;});}else{throwException(Failed to load file);}}
显示文件根据文件类型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的优势实现跨平台应用的开发。