vue前端切片上传文件到阿里oss

准备工作

1.前端直接上传文件到oss，需要在oss 做跨域配置

通过浏览器直接访问OSS时，CORS配置规则要求如下

• 来源：设置精准域名（例如www.aliyun.com）或带有通配符星号（*）的域名（例如*.aliyun.com）。
• 允许Methods：请根据实际使用场景，选择不同的Methods。例如分片上传时，设置为PUT；删除文件时，设置为DELETE。
• 允许Headers：设置为*。
• 暴露Headers：设置为ETag、x-oss-request-id和x-oss-version-id。

2. 使用npm安装SDK开发包

npm install ali-oss

3. 在vue中引用并使用

async upload () {

    const client = new OSS({
        region: 'oss-cn-hangzhou', // 根据那你的Bucket地点来填写
        accessKeyId: 'accessKeyId', // 自己账户的accessKeyId或临时秘钥
        accessKeySecret: 'accessKeySecret', // 自己账户的accessKeySecret或临时秘钥
        stsToken: 'securityToken',//  从STS服务获取的安全令牌（SecurityToken）。
        bucket: 'bucket' // bucket名字
      })
    try {
        const result = await client.multipartUpload(
          `${file.name}`,//如果需要传入到指定的文件夹下，需要在文件名前加上文件夹名称，如： `xxxxx/${file.name}`
          file,
          {
            progress: (p, cpt, res) => { // 获取分片上传进度、断点和返回值。
              console.log(p)
            },
            parallel: 4, //并发上传的分片数量
            partSize: 1024 * 1024 * 1,//分片大小
            headers: { //上传请求头设置
              'Content-Disposition': 'inline',
              'Content-Type': file.type
            },
            meta: {year: 2020, people: "test"},// 自定义元数据，通过HeadObject接口可以获取Object的元数据。
            mime: file.type//上传文件类型
          }
        )
        console.log(result, 'result= 切片上传完毕=')
      } catch (e) {
        console.log('异常--->', e)
        if (e.code === 'ConnectionTimeoutError') {
          // 请求超时异常处理
          console.log('TimeoutError')
        }
      }
}

如果上传中使用的是自己账户的accessKeyId和accessKeySecret，则不需要stsToken，，如果是用后端返回的临时访问密钥，则必须填入stsToken，

对象储存ossBrowser.js官方文档