图片上传

文件用于存储大尺寸和复杂数据，通常存储图片、音视频等二进制数据。

实现文件上传还需要了解leancloud是如何实现对象数据存储的。由于图片上传所需相关知识点不多，因此这里不做展开介绍，有需要可以去官网查看对应的文档。

Object

使用Obejct可以创建出一个前端对象，这个对象也直接对应着leancloud管理后台结构化数据内的表中的数据对象，官方称存数据的表为Class。如果并未在后台提前建立创建对象时提供名称的表，那么会在第一次被使用时自动创建这个表，然后我们后续再创建同类型的对象时，就自动关联上这个表。

set

在使用对象时，我们第一次的set操作，就是给表添加字段结构，并在第一次的数据上传后就会被SDK明确各个字段的类型。因此，就算是同名字段，如果变动了某字段的数据类型，那么后续上传就会失败！如若在开发阶段发生了这个问题，建议是直接删除整个表，再重新执行！

想了解更多相关API接口和参数，可以阅读官方API文档

提示

如果对错误的提示不太明白，可以通过官方的错误码详解查看中文对应错误码的解释。

save

save函数的返回值是一个Promise，执行save操作即是向后台保存数据。

File

File并不是Object的派生类型，它主要的功能职责就是将文件上传。在leancloud => 数据存储 => 结构化数据 => _File 中可以看到上传后的数据，也可以在leancloud => 数据存储 => 文件 内查看表格化的文件数据。

文件并非只做上传就完事了，通常还需要将文件的上传后的URL关联到其他表的字段中。因此需要利用Object和File来协同工作。

save

创建出的文件对象通过save函数即可向后台上传数据，在此过程中，若需要对上传进度进行控制，还可以通过向save函数传入获取上传进度的回调来获取上传进度。

做图片上传的两种方式:

1.不需要获取上传进度

import AV from "leancloud-storage";

const Uploader = {
  add(file, filename) {
    const item = new AV.Object('Image');
    const avFile = new AV.File(filename, file);
    item.set('filename', filename);
    item.set('owner', AV.User.current());
    item.set('url', avFile.url());
    return new Promise((resolve, reject) => {
      item.save().then(serverFile => resolve(serverFile), error => reject(error));
    });
  }
}

export {Uploader};

需要注意的点：

1. item.set('url',avFile.url())，官方示例中是错误的，获取url需要调用url函数获取;
2. 最好不要省略url的获取，本身我们需要的也是获取url地址，如果省略了，保存的就是一个文件的对象！
3. Image的Object在url字段关联了文件，但并不需要手动save一下文件，只需要对Image对象调用一次save即可，它会完成文件上传并执行字段关联的；

2.需要获取上传进度

import AV from "leancloud-storage";

const Uploader = {
  add(file: any, filename: string) {
    const avFile = new AV.File(filename, file);
    return new Promise((resolve: (serverFile: AV.Object) => void, reject) => {
      avFile
        .save({
          onprogress(progress: any) {
            console.log(progress);
          },
        })
        .then((serverFile: AV.File) => {
          const item = new AV.Object("Image");
          item.set("filename", filename);
          item.set("owner", AV.User.current());
          item.set("url", serverFile.url());

          item
            .save()
            .then((imageObj: AV.Object) => {
              resolve(imageObj);
            })
            .catch((error) => {
              reject(error);
            });
        })
        .catch((error) => {
          reject(error);
        });
    });
  },
};

总结：Object用于操作表，File操作文件。