为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 uppy入门：新手必备指南

uppy入门：新手必备指南

标签：
Html/CSS JavaScript 前端工具
概述

uppy入门教程详细介绍了uppy的安装、基本使用步骤、不同上传服务的配置以及如何自定义上传UI，帮助新手快速掌握uppy的使用方法。

uppy入门：新手必备指南
uppy简介与安装

什么是uppy

uppy是一个开源的前端文件上传库，它提供了丰富的API接口，允许开发者灵活地定制文件上传的用户体验。它支持多种文件上传方式，包括拖拽文件、选择文件夹、扫描二维码等。uppy不仅支持常见的文件上传，也支持上传文件夹和压缩文件。uppy还提供了多种插件，例如进度条显示、错误信息显示等，使得文件上传变得简单且强大。

uppy的安装方法

uppy可以通过npm或CDN引入到项目中。以下是安装uppy的两种方法：

  1. 通过npm安装：

    npm install uppy

  2. 通过CDN引入：

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/core-js@2.6.10/client/shim.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/uppy"></script>

uppy的基本使用步骤

  1. 创建uppy实例：

    import Uppy from '@uppy/core';

const uppy = new Uppy();

  2. 添加文件来源：

    • 使用ProgressBar插件添加进度条显示
    • 使用Previews插件添加预览文件的功能
    • 使用Info插件添加错误信息显示
    uppy.use(Uppy.ProgressBar, {
 target: document.querySelector('#progressBar')
});
uppy.use(Uppy.Previews, {
 target: document.querySelector('#previews')
});
uppy.use(Uppy.Info, {
 target: document.querySelector('#info')
});

  3. 添加上传服务：

    选择需要支持的上传服务，例如S3、Dropbox等。

    uppy.use(Uppy.XHRUpload, {
 endpoint: 'https://example.com/upload',
 headers: {
   'Authorization': 'Bearer your-token'
 }
});
文件选择与上传

如何选择文件

uppy提供多种方法让用户选择文件。最常见的方式是使用FileInput插件。

uppy.use(Uppy.FileInput, {
  target: document.querySelector('#fileInput')
});

用户可以通过点击这个文件输入区域来选择本地文件。

文件上传的基本配置

在添加上传服务后，需要配置一些参数来完成文件上传。例如，设置上传的endpoint、headers和参数等。

uppy.use(Uppy.XHRUpload, {
  endpoint: 'https://example.com/upload',
  headers: {
    'Authorization': 'Bearer your-token'
  },
  method: 'POST',
  allowRetry: true,
  retryDelays: [0, 1000, 3000, 5000]
});

handleFiles函数的使用

handleFiles函数用于处理选择的文件。你可以自定义这个函数来处理特定的逻辑，例如过滤、压缩文件等。

uppy.on('file-added', (files) => {
  uppy.setOptions({
    handleFiles: (files) => {
      return files.filter(file => file.type.startsWith('image/'));
    }
  });
});
使用不同上传服务

使用S3上传服务

S3是Amazon提供的对象存储服务。你可以使用uppy提供的s3插件来配置S3上传。

uppy.use(Uppy.s3, {
  endpoint: 'https://s3.amazonaws.com',
  getUploadParameters: ({ name, type }) => ({
    key: name,
    acl: 'public-read',
    Bucket: 'your-bucket-name',
    Expires: 60,
    AWSAccessKeyId: 'your-aws-access-key',
    ACL: 'public-read',
    ContentType: type
  }),
  meta: {
    name: 'uppy',
    type: 'image/jpeg'
  }
});

使用Dropbox上传服务

Dropbox提供了一个REST API，uppy通过dropbox插件来调用这个API来上传文件。

uppy.use(Uppy.dropbox, {
  getUploadParameters: ({ name, type }) => ({
    path: `/${name}`,
    mode: 'add',
    autorename: false,
    mute: false
  }),
  meta: {
    name: 'uppy',
    type: 'image/jpeg'
  }
});

使用其他云存储服务

除了S3和Dropbox，uppy还支持其他云存储服务，例如Google Cloud Storage、Azure Blob Storage等。你可以通过相应的插件来配置这些服务。

uppy.use(Uppy.gcs, {
  endpoint: 'https://storage.googleapis.com/upload/storage/v1/b',
  getUploadParameters: ({ name, type }) => ({
    name: name,
    contentType: type
  }),
  meta: {
    name: 'uppy',
    type: 'image/jpeg'
  }
});
自定义上传UI

自定义上传按钮样式

你可以通过CSS来改变上传按钮的样式。

<style>
  .uppy-input {
    font-size: 20px;
    padding: 20px;
    background-color: #00c6ff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }
</style>
uppy.use(Uppy.FileInput, {
  target: document.querySelector('#fileInput'),
  text: '选择文件',
  locale: {
    strings: {
      selectFile: '选择文件'
    }
  }
});

自定义上传进度条

你可以通过HTML和CSS来自定义进度条。

<div id="progressBar"></div>
<style>
  #progressBar {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
  }

  #progressBar span {
    height: 20px;
    background-color: #00c6ff;
    display: block;
    width: 0;
    text-align: center;
    line-height: 20px;
    color: white;
  }
</style>
uppy.use(Uppy.ProgressBar, {
  target: document.querySelector('#progressBar')
});

自定义错误信息显示

你可以通过自定义UI来显示错误信息。

<div id="info"></div>
<style>
  #info {
    font-size: 16px;
    color: red;
    margin-top: 10px;
  }
</style>
uppy.use(Uppy.Info, {
  target: document.querySelector('#info')
});
解决常见问题

上传失败的原因及解决办法

上传失败的原因通常包括网络问题、服务器端错误、文件太大等。你可以通过以下方法来解决这些问题：

  1. 检查网络连接： 确保网络连接正常，没有丢包或延迟。
  2. 检查服务器端错误： 查看服务器端的日志，找到具体的错误信息。
  3. 压缩文件： 如果文件太大，可以考虑压缩文件后再上传。

如何优化上传性能

  1. 使用分片上传： 将大文件分成多个小块上传，可以减少单次上传的大小，从而提高上传速度。
  2. 并发上传： 同时上传多个文件，可以利用多线程提高上传速度。
  3. 优化服务器端处理： 优化服务器端的处理逻辑，减少处理时间。

uppy与其他库的兼容性问题

  1. 处理冲突的依赖： 如果其他库依赖不同的版本，可以通过npm或yarn来解决依赖冲突。
  2. 使用代理库： 如果直接使用uppy有冲突，可以考虑使用代理库来避免冲突。
  3. 修改代码： 如果上述方法都无法解决，可以修改代码来兼容其他库。
实践案例分享

上传图片案例

上传图片案例展示了如何使用uppy上传图片到服务器，并显示上传进度和错误信息。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传图片</title>
<style>
  .uppy-input {
    font-size: 20px;
    padding: 20px;
    background-color: #00c6ff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }

  #progressBar {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
  }

  #progressBar span {
    height: 20px;
    background-color: #00c6ff;
    display: block;
    width: 0;
    text-align: center;
    line-height: 20px;
    color: white;
  }

  #info {
    font-size: 16px;
    color: red;
    margin-top: 10px;
  }
</style>
</head>
<body>
<div id="fileInput"></div>
<div id="progressBar"><span></span></div>
<div id="info"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/core-js@2.6.10/client/shim.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/uppy"></script>
<script>
  const uppy = new Uppy();

  uppy.use(Uppy.FileInput, {
    target: document.querySelector('#fileInput'),
    text: '选择文件',
    locale: {
      strings: {
        selectFile: '选择文件'
      }
    }
  });

  uppy.use(Uppy.ProgressBar, {
    target: document.querySelector('#progressBar')
  });

  uppy.use(Uppy.Info, {
    target: document.querySelector('#info')
  });

  uppy.use(Uppy.XHRUpload, {
    endpoint: 'https://example.com/upload',
    headers: {
      'Authorization': 'Bearer your-token'
    }
  });

  uppy.on('file-added', () => {
    uppy.upload();
  });

  uppy.on('upload-start', () => {
    console.log('开始上传');
  });

  uppy.on('upload-progress', (progress) => {
    document.querySelector('#progressBar span').style.width = progress + '%';
  });

  uppy.on('upload-success', (result) => {
    console.log('上传成功', result);
  });

  uppy.on('upload-error', () => {
    console.log('上传失败');
  });
</script>
</body>
</html>

上传视频案例

上传视频案例展示了如何上传视频文件，并处理视频的预览和上传进度。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传视频</title>
<style>
  .uppy-input {
    font-size: 20px;
    padding: 20px;
    background-color: #00c6ff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }

  #progressBar {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
  }

  #progressBar span {
    height: 20px;
    background-color: #00c6ff;
    display: block;
    width: 0;
    text-align: center;
    line-height: 20px;
    color: white;
  }

  #info {
    font-size: 16px;
    color: red;
    margin-top: 10px;
  }
</style>
</head>
<body>
<div id="fileInput"></div>
<div id="progressBar"><span></span></div>
<div id="info"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/core-js@2.6.10/client/shim.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/uppy"></script>
<script>
  const uppy = new Uppy();

  uppy.use(Uppy.FileInput, {
    target: document.querySelector('#fileInput'),
    text: '选择文件',
    locale: {
      strings: {
        selectFile: '选择文件'
      }
    }
  });

  uppy.use(Uppy.ProgressBar, {
    target: document.querySelector('#progressBar')
  });

  uppy.use(Uppy.Info, {
    target: document.querySelector('#info')
  });

  uppy.use(Uppy.XHRUpload, {
    endpoint: 'https://example.com/upload',
    headers: {
      'Authorization': 'Bearer your-token'
    }
  });

  uppy.use(Uppy.Previews, {
    target: document.querySelector('#previews')
  });

  uppy.on('file-added', () => {
    uppy.upload();
  });

  uppy.on('upload-start', () => {
    console.log('开始上传');
  });

  uppy.on('upload-progress', (progress) => {
    document.querySelector('#progressBar span').style.width = progress + '%';
  });

  uppy.on('upload-success', (result) => {
    console.log('上传成功', result);
  });

  uppy.on('upload-error', () => {
    console.log('上传失败');
  });
</script>
</body>
</html>

上传文件夹案例

上传文件夹案例展示了如何上传文件夹，并压缩和上传文件夹内的所有文件。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传文件夹</title>
<style>
  .uppy-input {
    font-size: 20px;
    padding: 20px;
    background-color: #00c6ff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }

  #progressBar {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
  }

  #progressBar span {
    height: 20px;
    background-color: #00c6ff;
    display: block;
    width: 0;
    text-align: center;
    line-height: 20px;
    color: white;
  }

  #info {
    font-size: 16px;
    color: red;
    margin-top: 10px;
  }
</style>
</head>
<body>
<div id="fileInput"></div>
<div id="progressBar"><span></span></div>
<div id="info"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/core-js@2.6.10/client/shim.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/uppy"></script>
<script>
  const uppy = new Uppy();

  uppy.use(Uppy.FileInput, {
    target: document.querySelector('#fileInput'),
    text: '选择文件夹',
    locale: {
      strings: {
        selectFile: '选择文件夹'
      }
    }
  });

  uppy.use(Uppy.ProgressBar, {
    target: document.querySelector('#progressBar')
  });

  uppy.use(Uppy.Info, {
    target: document.querySelector('#info')
  });

  uppy.use(Uppy.XHRUpload, {
    endpoint: 'https://example.com/upload',
    headers: {
      'Authorization': 'Bearer your-token'
    }
  });

  uppy.on('file-added', () => {
    uppy.setOptions({
      handleFiles: (files) => {
        return files.map(file => ({
          ...file,
          type: 'application/zip'
        }));
      }
    });
    uppy.upload();
  });

  uppy.on('upload-start', () => {
    console.log('开始上传');
  });

  uppy.on('upload-progress', (progress) => {
    document.querySelector('#progressBar span').style.width = progress + '%';
  });

  uppy.on('upload-success', (result) => {
    console.log('上传成功', result);
  });

  uppy.on('upload-error', () => {
    console.log('上传失败');
  });
</script>
</body>
</html>
``

以上是uppy的入门教程，希望能帮助你快速上手uppy。如果你有任何问题或需要进一步的帮助，可以参考uppy的官方文档或在GitHub上提问。
点击查看更多内容
发表于 2024.10.18 23:08， 共 111 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

一只斗牛犬

手记
篇
粉丝
49
获赞与收藏
300

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消