如何在华为云OBS（Object Storage Service）React前端实现直接上传功能？

在华为云OBS（Object Storage Service）React前端实现直接上传功能，通常需要以下几个步骤：

1. **配置API访问密钥**：首先，你需要在华为云控制台获取一个有效的Access Key和Secret Key，用于身份验证。

2. **引入库**：在React项目中，可以使用`axios`或其他HTTP客户端库来发送PUT请求到OBS的Upload URL。

3. **创建文件输入组件**：创建一个让用户选择文件的`input[type=file]`元素，并添加事件监听器来处理文件选择。

import React, { useRef } from 'react';
const FileInput = ({ onChange }) => {
  const fileInput = useRef(null);
  return (
    <div>
      <input type="file" ref={fileInput} onChange={(e) => onChange(e.target.files[0])} />
    </div>
  );
};

4. **发起上传请求**：当用户选择文件后，通过设置的`onChange`回调，你可以获取到`File`对象，然后构造一个包含Access Key、Bucket名、路径以及文件数据的上传请求。

const uploadFile = async (file, accessKey, secretKey, bucketName, objectName) => {
  const formData = new FormData();
  formData.append('file', file);
  try {
    const response = await axios.put(
      `https://obs.<your-region>.myhuaweicloud.com/${bucketName}/${objectName}`,
      formData,
      {
        headers: {
          Authorization: `Bearer ${accessKey}:${secretKey}`,
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      }
    );
    // 处理上传成功后的逻辑
  } catch (error) {
    console.error('Upload error:', error);
  }
};

5. **处理上传状态**：在`uploadFile`函数内部，你可以处理上传的成功、失败情况，并更新UI以显示进度或者错误信息。