在本篇博客中，我将介绍如何使用 Uppy 和阿里云的对象存储服务（OSS）来实现文件上传功能。通过配置 OSS 信息、自定义 Uppy 压缩插件以及使用 Uppy 进行文件上传，您可以轻松地将文件上传到阿里云 OSS，并实现各种操作，如进度跟踪和错误处理。

配置 OSS 信息

首先，您需要在代码中配置阿里云 OSS 的相关信息，包括 AccessKeyId、AccessKeySecret、Bucket 名称以及 OSS 存储区域和访问域名。这些信息将用于与阿里云 OSS 进行连接和文件上传。

js
    <!--导入SDK文件-->
    <script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.0.min.js"></script>
    <script type="text/javascript">
        const client = new OSS({
            // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
            region: '******',
            // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
            accessKeyId: '*********',
            accessKeySecret: '**********',
            // 从STS服务获取的安全令牌（SecurityToken）。
            // stsToken: "",
            // 填写Bucket名称。
            bucket: '*******'
        });
        const headers = {
            // 指定上传文件的类型。
            // 'Content-Type': 'text/html',
            // 指定该Object被下载时网页的缓存行为。
            // 'Cache-Control': 'no-cache',
            // 指定该Object被下载时的名称。
            // 'Content-Disposition': 'oss_download.txt',
            // 指定该Object被下载时的内容编码格式。
            // 'Content-Encoding': 'UTF-8',
            // 指定过期时间。
            // 'Expires': 'Wed, 08 Jul 2022 16:57:01 GMT',
            // 指定Object的存储类型。
            // 'x-oss-storage-class': 'Standard',
            // 指定Object的访问权限。
            // 'x-oss-object-acl': 'private',
            // 设置Object的标签，可同时设置多个标签。
            // 'x-oss-tagging': 'Tag1=1&Tag2=2',
            // 指定CopyObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
            'x-oss-forbid-overwrite': 'true',
        };
    </script>

自定义 Uppy 压缩插件

如果您需要对上传的文件进行处理，可以编写自定义的 Uppy 插件。在自定义插件中，您可以实现各种自定义操作如压缩算法、压缩文件、自定义上传等功能。

js
        import {
            UIPlugin,
        } from 'https://releases.transloadit.com/uppy/v3.25.5/uppy.min.mjs'
        class UppyCompressor extends UIPlugin {
            constructor(uppy, opts) {
                super(uppy, opts);
                this.id = 'Upload';
                this.type = 'modifier';
            }

            // oss上传接口
            compressAndUpload(file) {
                
                //对文件的路径与文件名做处理
                const name = `${file.name}`;
                
                return new Promise(
                    (resolve, reject) =>
                        client.put(name, file.data, { headers }).then((result) => {
                            return resolve(result);
                        }).catch((err) => {
                            return reject(err);
                        })
                );
            }

            prepareUpload = (fileIDs) => {
                const promises = fileIDs.map(fileID => {
                    const file = this.uppy.getFile(fileID);
                    this.uppy.emit('upload-start', [file]);
                    return this.compressAndUpload(file).then(compressedBlob => {
                        this.uppy.emit('upload-success', file, { uploadURL:compressedBlob.name });
                    }).catch(err => {
                        this.uppy.emit('upload-error', file, err);
                    });
                });

                return Promise.all(promises);
            };

            install() {
                //Each hook is a function that receives an array containing the file IDs that are being uploaded, and returns a Promise to signal completion. Hooks are added and removed through Uppy methods: addPreProcessor, addUploader, addPostProcessor, and their remove* counterparts. Normally, hooks should be added during the plugin install() method, and removed during the uninstall() method.
                //上传文件操作
                this.uppy.addUploader(this.prepareUpload);
            }

            uninstall() {
                this.uppy.removeUploader(this.prepareUpload);
            }
        }

使用 Uppy 进行文件上传

现在，让我们来使用 Uppy 完成文件上传的过程。首先，实例化 Uppy，并配置相关选项。并启用监听文件状态

js
    <script type="module">
        import {
            Uppy,
            Dashboard,
            // Tus,
            UIPlugin,
        } from 'https://releases.transloadit.com/uppy/v3.25.5/uppy.min.mjs'
        const uppy = new Uppy({
            locale: zh_CN,
        })
        uppy.use(Dashboard, { 
            target: '#files-drag-drop', 
            inline: true, 
        })
        // 添加自定义压缩插件
        uppy.use(UppyCompressor);

        // 监听文件上传事件
        uppy.on('file-added', (file) => {
            console.log('文件已添加:', file.name);
        });

        // 监听上传进度
        uppy.on('upload-progress', (file, progress) => {
            console.log('上传进度:', progress);
        });

        // 监听上传完成事件
        uppy.on('upload-success', (file, response) => {
            console.log('上传成功:', response);
        });

        // 监听上传错误事件
        uppy.on('upload-error', (file, error) => {
            console.error('上传错误:', error);
        });
    </script>
        

监听事件

js
    on('event', action)
    订阅 uppy 事件。
    
    once('event', action)
    创建触发一次的事件监听器。

    off('event', action)
    取消订阅 uppy 事件。
    
    参数：
    
    file-added
    每次添加文件时触发。
    
    files-added
    每次添加一个或多个文件时触发 — 一个事件，针对所有文件
    
    file-removed
    每次删除文件时触发。
    
    upload
    上传开始时触发。
    
    preprocess-progress
    预处理器的进展。
    
    progress
    每次更新总上传进度时触发：
    
    upload-progress
    每次有单个文件上传进度时触发：
    
    postprocess-progress
    后处理器的进展。
    
    upload-success
    每次完成一次上传时触发。
    
    complete
    当所有上传完成时触发。
    
    error
    当 Uppy 无法上传/编码整个上传内容时触发。
    
    upload-error
    每次单次上传失败时触发。
    
    upload-retry
    当重试上传时触发（例如，出现错误之后）。
    
    upload-stalled
    当上传在一段时间内没有收到任何进展时触发
    
    retry-all
    当所有失败的上传都重试时触发
    
    info-visible
    当“信息”消息应在 UI 中可见时触发。
    
    info-hidden
    当“信息”消息应在 UI 中隐藏时触发。
    

通过以上步骤，您可以使用 Uppy 完成阿里云 OSS 文件上传，并根据需要进行处理。