关于前端上传文件到七牛云的一些笔记

前言

此文章记录我从七牛云都不知道是什么的零开始到最后完成了粘贴、拖动、批量上传、压缩图片的功能实现，也能实现对上传过程某个文件上传的进度和错误的监听，可能写的会非常基础，如果不想看基础的同学，可以点击这里看小技巧，这是我摸索出来的小技巧，希望能给大家一点点帮助，废话不多说，开始正文啦。

申请账户

首先大家先去七牛云注册个账号，注册账号很容易，但是如果需要申请存储空间的话，是需要身份证照片审核的，大家要有所准备，然后需要了解几个名词：对象存储、存储空间、AccessKey、SecretKey、bucket。

对象存储：是七牛云的服务之一，我们常用的就是在里面创建一个或多个存储空间。
存储空间：在对象存储中创建的存储空间，也就是 bucket ，每个存储空间都有一个测试域名，上传了文件可以通过这个域名进行访问。
AccessKey：相当于用户名。
SecretKey：相当于密码。
bucket：就是创建的存储空间的名字。

具体步骤

我们需要使用AccessKey、SecretKey 和 bucket 生成一个 uploadToken ，然后前端可以使用这个 uploadToken 进行文件的上传。
注意：uploadToken 只能在后端生成，七牛的 JS API 是没有生成 uploadToken 的方法的。

算了

写了一点发现其实没什么难点可以写，都是一些很简单的东西，写出来好尴尬，算了算了，还是就写小技巧算了，大家还是看看下面的小技巧就好了，谢谢大家。

小技巧

这里是我在开发过程中自己思考发现的小技巧，希望能给大家一点帮助。

七牛云没有监控上传进度和上传错误的 API ？（JS SDK）

官方的 API 只有下面这个关于文件上传进度的上传对象回调方法，但是回调参数也没有是哪个文件的上传信息，如果单文件上传还好，但是如果是多文件上传，可能就会混乱不知道哪个是哪个的上传进度。

var observer = {
   
  next(res){
   
    //  total 字段的 object，包含loaded、total、percent三个属性，提供上传进度信息。
  },
  error(err){