如何使用阿里云OSS进行前端直传以及分片上传

在使用阿里云OSS进行前端直传时，首先我们需要去阿里云官网注册自己的存储桶，然后申请相关的accessKeyId和accessKeySecret，然后新建一个桶，为这个桶命名以及选择对应的地区。

然后可以根据自己的业务，封装对应的组件，以下是根据我自己的项目，所封装的上传组件，所用的是React技术栈

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 (          styles.file} /      resourcesName}        onChange={(e) = setResourcesName(e.target.value)}        placeholder="请输入文件名"      />      upload} className={styles.btn} style={{ marginTop: 10 }}上传资源      )};export default Oss;

下边的代码部分是分片上传内容，通常在上传内容较大的时候会使用分片上传，代码部分如下：

        Document    上传                        const client = new OSS({            // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。            region: "oss-cn-beijing",            // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。            accessKeyId: "",            accessKeySecret: "",            // 填写Bucket名称，例如examplebucket。            bucket: "",        });        const headers = {            // 指定该Object被下载时的网页缓存行为。            "Cache-Control": "no-cache",            // 指定该Object被下载时的名称。            "Content-Disposition": "example.txt",            // 指定该Object被下载时的内容编码格式。            "Content-Encoding": "utf-8",            // 指定过期时间，单位为毫秒。            Expires: "1000",            // 指定Object的存储类型。            "x-oss-storage-class": "Standard",            // 指定Object标签，可同时设置多个标签。            "x-oss-tagging": "Tag1=1&Tag2=2",            // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。            "x-oss-forbid-overwrite": "true",        };        // 指定上传到examplebucket的Object名称，例如exampleobject.txt。        // const name = "exampleobject.txt";        // 获取DOM。        const submit = document.getElementById("submit");        const options = {            // 获取分片上传进度、断点和返回值。            progress: (p, cpt, res) => {                console.log(p);            },            // 设置并发上传的分片数量。            parallel: 4,            // 设置分片大小。默认值为1 MB，最小值为100 KB。            partSize: 1024 * 100,            // headers,            // 自定义元数据，通过HeadObject接口可以获取Object的元数据。            meta: { year: 2020, people: "test" },            mime: "text/plain",        };        // 监听按钮。        submit.addEventListener("click", async () => {            try {                const data = document.getElementById("file").files[0];                const fileName = data.name;                // 分片上传。                const res = await client.multipartUpload(fileName, data, {                    ...options,                    // 设置上传回调。                    // 如果不涉及回调服务器，请删除callback相关设置。                    // callback: {                    //     // 设置回调请求的服务器地址。                    //     url: "http://examplebucket.aliyuncs.com:23450",                    //     // 设置回调请求消息头中Host的值，即您的服务器配置Host的值。                    //     host: "yourHost",                    //     /* eslint no-template-curly-in-string: [0] */                    //     // 设置发起回调时请求body的值。                    //     body: "bucket=${bucket}&object=${object}&var1=${x:var1}",                    //     // 设置发起回调请求的Content-Type。                    //     contentType: "application/x-www-form-urlencoded",                    //     customValue: {                    //         // 设置发起回调请求的自定义参数。                    //         var1: "value1",                    //         var2: "value2",                    //     },                    // },                });                console.log(res);            } catch (err) {                console.log(err);            }        });