上传文件到阿里云 oss，前端 browser.js 笔记

Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器，应用服务器再把文件上传到OSS。

 

和数据直传到OSS相比，有以下缺点

上传慢：用户数据需先上传到应用服务器，之后再上传到OSS

费用高：费用高：需要准备多台应用服务器。由于OSS上行流量是免费的，如果数据直传到OSS，将节省多台应用服务器的费用

目前可通过Web端将文件直接上传到OSS

使用 browser sdk 上传到OSS

cdn 引入 browser.js SDK

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>

或者 npm 安装 SDK 包

npm install ali-oss

 

（AccessKey ID和AccessKey Secret  和 stsToken）请求后端接口（后端去 [STS,临时授权访问] 获取）获取临时访问密钥，创建 OSS 对象

const OSS = require('ali-oss');

const client = new OSS({
    // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
    region: 'yourRegion',
    // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
    accessKeyId: 'yourAccessKeyId',
    accessKeySecret: 'yourAccessKeySecret',
    // 从STS服务获取的安全令牌（SecurityToken）。
    stsToken: 'yourSecurityToken',
    // 填写Bucket名称。
    bucket: 'examplebucket'
});

断点续传

const file = new File([fileContent], "multipart-upload-file");
// 上传至Bucket内Object的完整路径，例如exampledir/exampleobject.txt。
const name = "test.txt";
// 定义中断点。
let abortCheckpoint;

// 上传
const upload = () => {
    client.multipartUpload(name, file, {
            progress: (p, cpt, res) => {
                // 为中断点赋值。
                abortCheckpoint = cpt;
                console.log(abortCheckpoint);
                // 获取上传进度。
                console.log(p * 100);
            },
        })
        .then((r) => console.log(r));
}
// 暂停上传。
client.cancel();

// 恢复上传
const resumeUpload = async () => {
    // 设置重试次数为五次。
    try {
        const result = await client.multipartUpload(name, file, {
            checkpoint: abortCheckpoint,
            progress: (p, cpt, res) => {
                // 为了实现断点上传，您可以在上传过程中保存断点信息（checkpoint）。发生上传错误后，将已保存的checkpoint作为参数传递给multipartUpload，此时将从上次上传失败的地方继续上传。
                abortCheckpoint = cpt;
                // 获取上传进度。
                console.log(p);
            },
        });
        console.log(result);
    } catch (e) {
        console.log(e);
    }
};

上传回调

完成文件上传时提供回调给应用服务器。

const options = {
    progress: (p, cpt, res) => {
        // 为中断点赋值。
        abortCheckpoint = cpt;
        console.log(abortCheckpoint);
        // 获取上传进度。
        console.log(p * 100);
    },
    callback: {
        // 设置回调请求的服务器地址。
        url: 'http://examplebucket.aliyuncs.com:23450',
        // 设置回调请求消息头中Host的值，即您的服务器配置的Host值。
        // host: 'oss-cn-hangzhou.aliyuncs.com',
        // 设置发起回调时请求body的值。
        body: `bucket=${bucket}&object=${object}&etag=${etag}&size=${size}&mimeType=${mimeType}&imageInfo.height=${imageInfo.height}&imageInfo.width=${imageInfo.width}&imageInfo.format=${imageInfo.format}&my_var=${x:my_var}`,
        // 设置发起回调请求的Content-Type。
        // contentType: 'application/x-www-form-urlencoded',
        // 设置发起回调请求的自定义参数。
        customValue: {
            var1: 'value1',
            var2: 'value2'
        }
    }
}


// 上传
const upload = () => {
    client.multipartUpload(name, file,options).then((r) => console.log(r));
}

 

 

 

 还有 简单上传 和 分片上传 可参考阿里云文档地址 https://help.aliyun.com/document_detail/64047.htm?spm=a2c4g.11186623.0.0.119f566aQcL48d#concept-64047-zh