华为云文件上传 demo

### 华为云文件上传示例 #### Java SDK 实现 OBS 文件上传 为了实现Java应用程序向华为云对象存储服务(OBS)上传文件的功能，需先引入相应的依赖库。具体来说，在`pom.xml`中加入如下依赖项[^2]： ```xml <dependency> <groupId>com.huaweicloud</groupId> <artifactId>esdk-obs-java</artifactId> <version>3.21.12</version> </dependency> ``` 之后可以编写工具类用于执行实际的文件上传操作。下面是一个简单的例子，展示了如何创建ObsClient实例并调用putObject方法完成文件上传任务。 ```java import com.obs.services.ObsClient; import com.obs.services.model.PutObjectRequest; public class ObsUploadDemo { public static void main(String[] args){ String endPoint = "https://your-endpoint"; String ak = "Your Access Key ID"; String sk = "Your Secret Access Key"; try (ObsClient obsClient = new ObsClient(ak, sk, endPoint)){ PutObjectRequest request = new PutObjectRequest("bucket-name", "object-key", "/path/to/file"); obsClient.putObject(request); System.out.println("File uploaded successfully."); } catch(Exception e){ e.printStackTrace(); } } } ``` 此代码片段实现了通过指定路径读取本地文件，并将其作为对象存放到给定名称的空间(bucket)内。 #### 前端 JavaScript 实现 OBS 文件上传与进度显示 对于Web应用而言，可以直接利用JavaScript API同OBS交互来进行文件上传工作。这里给出一段基于原生XMLHttpRequest的对象上传脚本以及进度条更新逻辑[^3]： ```javascript function uploadToObs(fileInputId,bucketName,objKey){ const file = document.getElementById(fileInputId).files[0]; let xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', function(event){ if(event.lengthComputable){ var percentComplete = event.loaded / event.total * 100; console.log(`Progress: ${percentComplete}%`); } }); xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200){ alert('Upload completed!'); } }; xhr.open('PUT', `https://${bucketName}.obs.region.cloud.com/${objKey}`, true); xhr.setRequestHeader('Content-Type',file.type); xhr.send(file); } // HTML部分 <input type="file" id="myFile"/> <button onclick="uploadToObs('myFile','test-bucket','example.txt')">Upload to OBS</button> ``` 上述函数接收三个参数：HTML input元素ID、目标桶名和对象键值(obj key)，当点击按钮触发时会发起HTTP PUT请求至对应的OBS URL地址，同时监听上传过程中的事件以便实时反馈进度情况。 #### React 应用集成 OBS 图片上传及预览功能 考虑到现代单页应用的需求场景，如果项目采用React框架构建，则可参照下述方式整合图片上传组件及其在线查看能力。注意这里的URL构造遵循特定模式以确保资源能够被正确解析加载[^4]: ```jsx import React from 'react'; import { Upload, message } from 'antd'; class ImageUploader extends React.Component { handleSuccess(info) { const url = `https://ceshiOBS.preview.cn/ceshiwenjian/${info.file.name}`; this.setState({imageUrl:url}); message.success(`${info.file.name} was uploaded successfully.`); } render() { return ( <> <Upload action={`https://your-bucket.obs.region.cloud.com`} onChange={this.handleSuccess.bind(this)}> <Button>Select File</Button> </Upload> {/* 预览 */} {this.state?.imageUrl && <img src={this.state.imageUrl} alt="" style={{width:'auto'}}/> } </> ); } } export default ImageUploader; ``` 这段代码定义了一个名为ImageUploader的React组件，它不仅提供了选择文件进行上传的能力，还能够在成功后立即展示所选图像的内容。其中的关键在于根据返回的信息动态拼接出完整的访问链接。