obs-upload-checkpoint

插件简介

基于javaScript、esdk-obs-browserjs封装的华为云obs文件上传组件。

支持以下基础功能：

普通文件上传

前端文件直传到obs资源管理平台，无需经过后端接口处理，上传速度相对更快，且支持实时获取上传进度

大文件断点续传：

对上传的文件进行分片上传；
对上传中的文件进行暂停上传操作；
对上传失败的文件进行重新上传操作。

其他附加功能

单个、批量删除服务器已经上传的文件
下载已经上传到服务器的文件
获取服务器文件临时授权访问URL（用于预览、或者下载文件时会报跨域等问题的情况）
根据文件url获取已经上传文件的Bucket、key、endPoint信息
批量暂停/续传文件

demo

demo地址：https://github.com/liulinmei/obs-upload-checkpoint/tree/master/example

基础使用

项目下载 obs-upload-checkpoint

npm install obs-upload-checkpoint
引入obs-upload-checkpoint

import { uploadFile, breakpointResume, delFile, multiDelFile, downloadFile, getSignedFileUrl} from 'obs-upload-checkpoint'

uploadFile上传函数

基础使用

<script>
import { uploadFile } from "obs-upload-checkpoint";
export default {
  name: "obsDemo",
  data() {
    return {
      uploadingFile: [],
    };
  },
  created() {},
  methods: {
    // 文件上传
    uploadFile(param) {
      let file = param.file;
      let fileInfo = uploadFile({
        file,
        getAuth:async (){
          return {
            ak:'your ak',
            sk:'your sk'
          }
        },
        endPoint:'your endPoint',
        resFileKey: {
          name: "fileName",
          url: "url",
          size: "size",
        },
        module: "material_pc/inquiry", 
        onBeforeUpload: (fileInfo) => {
          console.log("文件上传前回调", fileInfo);
        },
        uploadProgress: (percentage) => {
          console.log("上传进度", percentage, fileInfo);
        },
        uploadSuccess: (fileUrl, status) => {
          console.log("文件上传成功回调", fileUrl, status);
        },
        uploadError: (err, status) => {
          console.log("文件上传失败回调", err, status);
        },
      });
      this.uploadingFile.push(fileInfo);
    },
  },
};
</script>

Options

参数	说明	类型	是否必传	可选值	默认值
file	需要上传的文件	File	必传	—	—
resFileKey	上传成功后想要保留的字段(可直接上传至后端接口的字段，不需要在调用接口前再次转化为后端想要的字段名。主要是为了适配不同的后端接口所需要的字段名不一致。)	object	—	详细见resFileKey配置表	详细见resFileKey配置表
Bucket	桶名（华为云obs桶名，可理解为电脑的c、d、e、f盘，需要obs管理员预先创建）	string	必传	—	shigongbang
endPoint	endPoint	string	必传	—	—
module	文件上传后所处的文件夹，当文件夹在储存服务器中不存在时文件上传成功后会自动新建（建议格式：项目名/模块名）	string	—	—	member_center
TaskNum	分段上传时的最大并发数	int	—	—	3
PartSize	分段大小，单位字节	int	—	100KB~5GB	9MB
getAuth	获取ak、sk函数，一般为调用后端接口获取，返回值需要为Promise对象	function	必传	—	—
onBeforeUpload	文件上传前回调，如果此回调函数返回false则文件不会被上传到obs服务，功能类似element上传组件的的before-upload,回调函数fileInfo参数：文件基本信息	function(fileInfo)	—	—	—
uploadProgress	文件上传进度回调	function(percentage)	—	—	—
uploadSuccess	文件上传成功回调，fileUrl：上传成功后文件的访问地址，status：文件上传状态；	function(fileUrl, status)	—	—	—
uploadError	文件上传失败回调	function(err, status)	—	—	—
statusChange	文件上传状态改变，status：当前文件的上传状态；	function(status)	—	—	—

返回值-Object

上传成功后仅保留了resFileKey中配置的字段，文件上传成功前的字段如下表：

属性名	说明
id	默认为选择的文件对象里面的uuid（即Options-file对象里面的uuid）
name	对应选择的文件对象（即Options-file对象）里面的name
size	上传文件大小，对应选择的文件对象（即Options-file对象）里面的size
type	上传文件类型，对应选择的文件对象（即Options-file对象）里面的type
percentage	文件已经上传的百分比
Key	文件唯一Key，组件内部自动生成
url	文件上传成功后，对应obs的访问地址
status	文件上传状态：-1 - 上传被暂停； 1 - 上传中； 2 - 上传失败; 3 - 上传完成

breakpointResume暂停/续传文件

基础使用：

<script>
import { breakpointResume } from "obs-upload-checkpoint";
export default {
  name: "obsDemo",
  data() {
    return {
      uploadingFile: [],
    };
  },
  created() {},
  methods: {
    // 文件上传
    uploadFile(fileInfo) {
      const { Key } = fileInfo
      breakpointResume(Key)
    },
  },
};
</script>

Options

参数	说明	类型	是否必传	可选值	默认值
key	文件唯一Key,对应上传函数返回的fileInfo对象里面的Key字段值	String	必传	—	—

delFile 删除文件

基础使用：

<script>
import { delFile } from "obs-upload-checkpoint";
export default {
  name: "obsDemo",
  data() {
    return {
      uploadingFile: [],
    };
  },
  created() {},
  methods: {
    // 文件上传
    handleDelFile(fileUrl) {
      delFile({fileUrl,ak:'your ak',sk:'your sk'})
    },
  },
};
</script>

Options-Object

入参为object对象，对象中可传属性值如下表：

参数	说明	类型	是否必传	可选值	默认值
Key	如果删除文件为为上传到服务器的文件时，此值必传，否则可不传，对应上传函数返回的fileInfo对象里面的Key字段值（无特殊情况下，没有上传到服务器的文件可不用做删除处理）	String	与fileUrl二选一	—	—
fileUrl	删除已上传到服务器的文件时，此值必传，对应文件访问地址	String	与Key二选一	—	—
ak	授权所需ak	String	必传	—	—
sk	授权所需sk	String	必传	—	—

multiDelFile批量删除文件

基础使用：

<script>
import { multiDelFile } from "obs-upload-checkpoint";
export default {
  name: "obsDemo",
  data() {
    return {
      uploadingFile: [],
    };
  },
  created() {},
  methods: {
    // 文件上传
    handleDelFile(fileUrl) {
      multiDelFile({urlList:[fileUrl,'fileUrl2','fileUrl3'],ak:'your ak',sk:'your sk'})
    },
  },
};
</script>

Options-Object

入参为object对象，对象中可传属性值如下表：

参数	说明	类型	是否必传	可选值	默认值
KeyList	如果删除文件为为上传到服务器的文件时，此值必传，否则可不传，对应上传函数返回的fileInfo对象里面的Key字段值（无特殊情况下，没有上传到服务器的文件可不用做删除处理）	Array	与urlList二选一	—	—
urlList	删除已上传到服务器的文件时，此值必传，对应文件访问地址	Array	与KeyList二选一	—	—
ak	授权所需ak	String	必传	—	—
sk	授权所需sk	String	必传	—	—

downloadFile下载文件

基础使用：

<script>
import { downloadFile } from "obs-upload-checkpoint";
export default {
  name: "obsDemo",
  data() {
    return {
      uploadingFile: [],
    };
  },
  created() {
    downloadFile({fileUrl:'fileUrl',ak:'your ak',sk:'your sk'})
  },
  methods: {
  },
};
</script>

Options-Object

入参为object对象，对象中可传属性值如下表：

参数	说明	类型	是否必传	可选值	默认值
fileUrl	对应文件访问地址	String	必传	—	—
fileName	文件保存到本地的文件名称	String	—	—	fileUrl地址后缀名前面的名称
ak	授权所需ak	String	必传	—	—
sk	授权所需sk	String	必传	—	—

getSignedFileUrl获取obs文件临时授权访问地址

主要用于解决直接使用文件地址预览、下载文件时会报跨域问题

基础使用：

<!--根据文件地址在线预览txt内容-->
<template>
  <div
    v-html="txtValue"
    class="common-txt-preview"
    v-loading="loading"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading"
  ></div>
</template>

<script>
import { getSignedFileUrl } from "obs-upload-checkpoint";
export default {
  name: "txtPreview",
  data() {
    return {
      txtValue: "",
      loading: true,
    };
  },
  created() {
    let { url } = this.$route.query;
    if (url) {
      let endStr = this.getEnd(url)?.toLowerCase();
      if (endStr === "txt") {
        this.getTxtContent(url);
      } else {
        this.loading = false;
        this.$message.error("只支持预览txt文件");
      }
    } else {
      this.loading = false;
      this.$message.error("文件url获取失败");
    }
  },
  methods: {
    async getTxtContent(url) {
      let { SignedUrl } = await getSignedFileUrl(url);
      // 获取到文件临时访问地址进行请求解析文件内容
      if (SignedUrl) {
        let self = this;
        let xhr = new XMLHttpRequest();
        xhr.open("get", SignedUrl, true);
        xhr.onload = function () {
          if (this.status == 200) {
            // 当遇到内容内有html标签时先进行替换，防止v-html进行解析。将空格和换行给替换为html标签进行解析
            self.txtValue = this.responseText
              .replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/ /g, "&nbsp;")
              .replace(/\n/g, "<br>");
            self.loading = false;
          } else {
            self.loading = false;
            this.$message.error("获取文件内容失败");
          }
        };
        xhr.send();
      } else {
        this.loading = false;
        this.$message.error("获取文件临时访问地址失败");
      }
    },
    // 正则匹配文件后缀
    getEnd(file) {
      return file && file.replace(/.+\./, "");
    },
  },
};
</script>

<style lang="scss" scoped>
.common-txt-preview {
  box-sizing: border-box;
  height: 100vh;
  padding: 30px;
  font-size: 16px;
  word-break: break-all;
}
</style>

Options-Object

入参为object对象，对象中可传属性值如下表：

参数	说明	类型	是否必传	可选值	默认值
fileUrl	对应文件访问地址	String	必传	—	—
ak	授权所需ak	String	必传	—	—
sk	授权所需sk	String	必传	—	—

getBucketAndKeyByUrl根据文件url获取Bucket、key、endPoint

基础使用：

<script>
import { getBucketAndKeyByUrl } from "obs-upload-checkpoint";
export default {
  data() {
    return {
  
    };
  },
  created() {
    const { Bucket, Key, endPoint } = getBucketAndKeyByUrl(fileUrl);
  },
  methods: {
  
  },
};
</script>

Options

参数	说明	类型	是否必传	可选值	默认值
fileUrl	对应文件访问地址	String	必传	—	—

multiBreakpointResume批量暂停/续传文件操作

基础使用：

<script>
import { multiBreakpointResume } from "obs-upload-checkpoint";
export default {
  data() {
    return {
  
    };
  },
  created() {
  },
  methods: {
    // 暂停所有正在上传的文件
    stopAllUpload() {
      let uploadingFiles = []
      this.uploadingFile.map((item) => {
        if (item.status === 1) {
          uploadingFiles.push(item.Key)
        }
      })
      multiBreakpointResume(uploadingFiles)
    },
  },
};
</script>

Options

参数	说明	类型	是否必传	可选值	默认值
keyList	对应文件Key集合	Array	必传	—	—

obs-upload-checkpoint

插件简介

基础使用

uploadFile上传函数

breakpointResume暂停/续传文件

delFile 删除文件

multiDelFile批量删除文件

downloadFile下载文件

getSignedFileUrl获取obs文件临时授权访问地址

getBucketAndKeyByUrl根据文件url获取Bucket、key、endPoint

multiBreakpointResume批量暂停/续传文件操作

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

obs-upload-checkpoint

插件简介

基础使用

uploadFile上传函数

breakpointResume暂停/续传文件

delFile 删除文件

multiDelFile批量删除文件

downloadFile下载文件

getSignedFileUrl获取obs文件临时授权访问地址

getBucketAndKeyByUrl根据文件url获取Bucket、key、endPoint

multiBreakpointResume批量暂停/续传文件操作

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads