如何使用阿里云OSS进行前端直传-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何使用阿里云OSS进行前端直传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在使用阿里云OSS进行前端直传时，首先我们需要去阿里云官网注册自己的存储桶，然后申请相关的accessKeyId和accessKeySecret，然后新建一个桶，为这个桶命名以及选择对应的地区。
然后可以根据自己的业务，封装对应的组件，以下是根据我自己的项目，所封装的上传组件，所用的是React技术栈文章来源地址https://www.toymoban.com/news/detail-833466.html

import OSS from "ali-oss";
import { plus } from '../apis/person/index'
import styles from './oss.module.less'
import { Input } from "antd";
import { useState } from "react";

const Oss = () => {
  const [resourcesName, setResourcesName] = useState('')
  const upload = () => {
    const client = new OSS({
      region: "", // 填写桶的地区
      accessKeyId: "", // 桶的key
      accessKeySecret: "", // 桶的secret
      bucket: "dd-robot-react", // 桶的名称
    });

    const upload = document.getElementById("upload");

    async function putObject(data: any) {
      try {
        const options = {
          meta: { temp: "demo" },
          mime: "json",
          headers: {
            "Content-Type": file.type
          },
        };

        const result = await client.put(data.name, data, options)
        console.log(result);
        console.log(result.url);
        const ossDomain = "dd-robot-react.oss-cn-beijing.aliyuncs.com"; // 替换为你的实际OSS域名
        const fileUrl = `https://${ossDomain}/${data.name}`;
        console.log(fileUrl);

        let res = await plus({
          data_link: result.url,
          data_name: resourcesName,
          type: 3
        })
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    }

    upload.addEventListener("click", () => {
      const data = file.files[0];
      console.log(data.name);
      putObject(data);
    });
  }

  return (
    <>
      <input id="file" type="file" className={styles.file} />
      <Input
        value={resourcesName}
        onChange={(e) => setResourcesName(e.target.value)}
        placeholder="请输入文件名"
      />
      <button id="upload" onClick={upload} className={styles.btn} style={{ marginTop: 10 }}>上传资源</button>
    </>
  )
};

export default Oss;