@aplus-frontend/oss v1.1.3-beta.9

Repackaged ali-oss sdk to make it easier to upload files to Alibaba Cloud oss

Quick start

//add -w in you root folder
pnpm install @aplus-frontend/oss -S -w

Usage example

//register client instance
import { client } from '@aplus-frontend/oss'

//some code in you project
import { you_STS_server } from '@/api/sts'

//init oss access token
const ossIntsance = await client.initOssClient({
  you_STS_server,
  onFailure: err => {
    console.warn('get oss accessSecret fail', err)
  }
})

//after init
//you can use ossIntsance do something

ossIntsance.put(..)
ossIntsance.getSignatureUrl(..)
ossIntsance.downloadFile(..)
ossIntsance.deleteFile(..)
ossIntsance.pauseUpload(...)


// upload image or video with oss
// your can use put method to upload
const result = await client.put({
  fileName: file.name,
  dirName: 'video',
  data: file,
  progressCallBack: (p: number) => {
    percentVideo.value = p
  },
  //the number of parts to be uploaded in parallel
  parallel: 6,
  //the suggested size for each part, default 1024 * 1024(1MB), minimum 100 * 1024(100KB)
  partSize: 1024 * 1024
})

if (result.status === 200) {
  const { status, previewUrl, saveUrl } = result
  console.log('status---', status)
  console.log('previewUrl---', previewUrl)
  console.log('saveUrl---', saveUrl)
} else {
  //failure
  console.log(result.message)
}

//you can use download method to download
let res = client.downloadFile(fileName)
console.log(res.message)
console.log(res.status)
//you can  get signature url to preview with  getSignatureUrl method
let signatureUrl = client.getSignatureUrl(pathName)
//get signature url
//after expires seconds, the url will become invalid, default is 3600s
console.log(signatureUrl)

//delete file
let res = await client.deleteFile(pathName)
console.log(res)

//pauseUpload
let res = = await client.pauseUpload()
console.log(res)

Methods

initOssClient

type: initOssClient(options: RequestOssOptions): Promise<Oss | null>

tips: register client instance with you sts server

ResquestOssOptions

put

type: put({ fileName, dirName, data, progressCallBack, parallel, partSize }: uploadParams): Promise<actionResponse>;

tips: you can put image video with put core method

put options

extractZip

type: extractZip(file: File): Promise<extractedFile[]>;

tips: The zip file will be decompressed with extractZip methods ,After that you want to upload to Ali oss one by one through the put method by yourself.

extractZip options

extract zip file demo

//upload zip file demo

//template
 <input type="file" @change="onFileChange" />

//logical
 const onFileChange = async (e) => {
      let res = await client.extractZip(e.target.files[0]);
      console.log(res)
  };

downloadFile

type: downloadFile(savePathName: Array<string> | string | Array<{path: string;fileName: string;}>): Promise<actionResponse>

tips: download file with downloadFile method (support multiple download files)

downloadFile options

getSignatureUrl

type: getSignatureUrl(name: string, expires?: number, rename?: string): Promise<string | undefined>;

tips: get signature url to preview

getSignatureUrl options

deleteFile

type: deleteFile(savePathName: string, isRealDelete?: boolean): Promise<actionResponse>;

tips: delete oss file

deleteFile options

pauseUpload

type: pauseUpload(): Promise<actionResponse>;

tips: pause upload

destroy

type: destroy(): Promise<actionResponse>

tips: destroy oss instance

actionResponse

How to use in project with Vue3

You can write useOss.ts global Hooks like below

import { client } from '@aplus-frontend/oss';
import type { Oss } from '@aplus-frontend/oss';
import { getOssAccess } from '@/api/sys/uploadOss';
import { onMounted } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
let ossInstance: Oss;
// 获取client实例对象
export function useOss() {
  return {
    client: ossInstance
  };
}
// 初始化client实例对象
export function useOssInit() {
  onMounted(async () => {
    ossInstance = await client.initOssClient({
      getOssAccess,
      onFailure: (err) => {
        console.log(err)
      }
    });
  });
  return useOss();
}

you need to download or upload functionality in your application you can use like this

  import { useOssInit, useOss } from '@/hooks/web/useOss';
  //oss not init
  //your can use useOssInit to initial
  useOssInit();
  //after initial you can use useOss to get client instance
  const { client } = useOss();

  const result = await client.put(...)

support multipart upload

support multipart upload with exports createOssInstance method to create multipart upload instance

import { createOssInstance } from '@aplus-frontend/oss';

const client1 = createOssInstance()
client1.put(...)

const client2 = createOssInstance()
client2.put(...)
//stop client1 upload
client1.pauseUpload()
//stop client2 upload
client2.pauseUpload()