Uppy 开源文件上传器入门指南

最新推荐文章于 2024-08-09 07:23:08 发布

殷泳娓

最新推荐文章于 2024-08-09 07:23:08 发布

阅读量611

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01056/article/details/141043672

Uppy 开源文件上传器入门指南

uppyThe next open source file uploader for web browsers :dog: 项目地址:https://gitcode.com/gh_mirrors/up/uppy

1、项目介绍

Uppy是一款由Transloadit团队开发的现代Web浏览器兼容的开源文件上传器。它不仅仅局限于简单的文件选择功能，还提供了丰富的特性如拖拽上传、远程来源（Instagram、Dropbox等）文件导入、摄像头支持以及图像编辑等功能。Uppy旨在优化网页上的文件上传体验，支持精确的上传进度报告，并在客户端进行文件验证。此外，它集成了多种编码后端，在上传之后可以处理如旋转或检测图片方向等问题。

2、项目快速启动

安装Uppy

你可以通过npm或Yarn来安装Uppy：

npm install @uppy/core @uppy/dashboard @uppy/tus
# 或者使用 Yarn
yarn add @uppy/core @uppy/dashboard @uppy/tus

或者直接引入CDN中的预构建包：

<!-- 添加CSS到<head> -->
<link href="https://releases.transloadit.com/uppy/v4.1.0/uppy.min.css" rel="stylesheet">
<script type="module">
import { Uppy, Dashboard, Tus } from 'https://releases.transloadit.com/uppy/v4.1.0/uppy.min.mjs';
const uppy = new Uppy();
uppy.use(Dashboard);
uppy.use(Tus, {
  endpoint: 'https://tusd.tusdemo.net/files/'
});
</script>

初始化与配置

创建一个基本的实例并设置插件：

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import Tus from '@uppy/tus';

const uppy = new Uppy();
uppy.use(Dashboard);
uppy.use(Tus, {
  endpoint: 'https://your-tus-endpoint'
});

// 当上传完成时触发事件
uppy.on('complete', (result) => {
  console.log('Upload complete:', result);
});