React实现阿里云OSS上传文件的示例

我很高兴为您提供有关“React实现阿里云OSS上传文件的示例”的完整攻略。下面是解释：

1. 什么是阿里云OSS?

阿里云对象存储（OSS）是一种经济高效、可扩展和安全的云存储服务，用于存储、备份和归档大量非结构化数据，如图像、音频和视频文件。阿里云OSS适用于各种应用程序，包括移动应用程序、企业网站和社交媒体平台。

2. 如何在React中使用阿里云OSS进行文件上传？

阿里云提供了oss-js-sdk供我们使用，以下将讲解如何使用oss-js-sdk实现React文件上传。

2.1 安装项目所需要的依赖

npm i ali-oss qiniu-js

2.2 创建配置文件

在src目录下创建config/index.js配置文件。

export const AccessKey = ''; // 把所有的''去掉
export const SecretKey = '';
export const endpoint = '';
export const bucket = '';

2.3 创建阿里云OSS上传文件组件

在src/components目录下新建OSSUploader文件夹，并在文件夹内添加index.js文件，并编写以下代码。

import React from 'react';
import { Upload, message } from 'antd';
import * as OSS from 'ali-oss';
import { AccessKey, SecretKey, endpoint, bucket } from '@/config';

class OSSUploader extends React.Component {
  handleBeforeUpload = (file) => {
    const ossClient = new OSS({
      accessKeyId: AccessKey,
      accessKeySecret: SecretKey,
      endpoint: endpoint,
      bucket: bucket,
    });
    const uuid = new Date().getTime().toString() + parseInt(Math.random() * 100000, 10).toString();
    const fileName = uuid + '_' + file.name;
    const key = fileName;
    ossClient
      .multipartUpload(key, file, {
        progress: async (p) => {
          const percent = (p * 100).toFixed(1);
          console.log('Progress:', percent);
        },
      })
      .then((result) => {
        console.log(result);
        message.success(`上传成功，${file.name} 文件名为：${fileName}`);
      })
      .catch((error) => {
        console.log(error);
        message.error('上传失败，请重试！');
      });
    return false;
  };

  render() {
    return (
      <Upload className="upload-demo" beforeUpload={this.handleBeforeUpload}>
        <span className="ant-upload-text">Upload</span>
      </Upload>
    );
  }
}

export default OSSUploader;

2.4 在页面中使用组件

在任何具有页面的组件中导入我们的OSSUploader，提供给用户上传文件的功能，如下示例：

import React, { Component } from "react";
import { Card } from "antd";
import OSSUploader from "@/components/OSSUploader";

export default class Home extends Component {
  render() {
    return (
      <div>
        <Card hoverable>
          <p>请上传相应的文件</p>
          <OSSUploader />
        </Card>
      </div>
    );
  }
}

上述示例中，我们在页面中调用了OSSUploader组件，以启用文件上传功能。

结束语

这就是React实现阿里云OSS上传文件的示例攻略。感谢您的耐心阅读，如果您有任何问题，请在评论栏中留言。