kk-oss

kk-oss

安装使用

安装包

# 方式1. npm
npm install kk-oss ali-oss -S
# 方式2.
cd 本项目
npm link
cd 项目
npm link kk-oss
# 方式3.
copy 到项目中
"dependencies": {
    # ...
    "kk-oss": "file:./src/plugins/kk-oss"
},

使用包

import Vue from "vue";
import OSS, { ALI_OSS_API_URL } from "kk-oss";

import { post } from "@/项目中封装的公用post方法";
import { stsToken } from "@/项目中封装的请求oss配置接口方法";

Vue.use(OSS, {
  // 方式1.
  fetchOSS: (data) => post(ALI_OSS_API_URL, data),
  // 方式2.
  fetchOSS: stsToken,
});

上传

Options(Vue2 & 3)

// step 1.
await this.$oss.init()

// 或者
import OSS from 'kk-oss'
const client = await OSS.instance.init()

console.log(this.$oss: OSS)

interface OSS {
  client: AliOSS // ali-oss 实例,
  config: {} // 未使用,
  fetchOSS: () => Promise<{ data: any }> // 获取ali-oss 参数的方法,
  generateFileName: (file: File, opts: IFilePathOptions) => string // 生成文件名和日期目录
  getUploadFilePath: (file: File, opts: IFilePathOptions) => string // 生成文件保存路径
}

// step 2 生成文件保存路径和上传
const filePath = this.$oss.getUploadFilePath(file, {
  type: 'img', // 必填;
  business: 'kukenews/rich-text', // 必填
  platform: 'web', // 必填;
  private: false // 默认undefined;
  directory: '', // 默认自动生成; 文件日期目录; 可自定义
  fileName: '', // 默认自动生成; 文件名; 可自定义
})
// step 3
const result = await this.$oss.client.put(filePath, file)
console.log(result)
// {
//   name: "文件路径",
//   res: Response,
//   url: "访问路径",
// }

Setup(Vue3)

vue3 组件封装参考 /example/src/components/KkUploadImage.vue

// step 1
import useOSS from 'kk-oss/src/useOSS'
const { initOSS } = useOSS()
const $oss = await initOSS()

// 或者
import OSS from 'kk-oss'
const client = await OSS.instance.init()

console.log($oss) // 返回类型 参考 Options

// step 2 生成文件保存路径和上传
const filePath = $oss.getUploadFilePath(file, {
  type: 'img', // 必填;
  business: 'kukenews/rich-text', // 必填
  platform: 'web', // 必填;
  private: false // 默认undefined;
  directory: '', // 默认自动生成; 文件日期目录; 可自定义
  fileName: '', // 默认自动生成; 文件名; 可自定义
})
// step 3
const result = await $oss.client.put(filePath, file)
console.log(result) // 返回类型 参考 Options

下载

import {
  downloadFileByURL,
  downloadFileByData,
  downloadFileByXHR,
} from "kk-oss";

// 使用a标签模拟下载，文件服务器地址
downloadFileByURL(url, name, cb);
// 使用 Blob 下载二进文件流或字符串
downloadFileByData(data, name, mimeType);
// 使用 Blob 下载GET请求返回的二进制文件流
downloadFileByXHR(url, name, mimeType, headers);

可能出现的问题

1. v0.0.11版本前会出现在 vue-cli 项目不能正常运行的问题

// v0.0.11版本前会出现
// 临时解决
{
  "transpileDependencies": ["kk-oss"],
}
// 解决 v0.0.12 版本增加babel编译

1. 如不能正常运行, 提示 @babel/runtime/**/* 错误

npm i babel-core 或 @babel/runtime