obs-upload-checkpoint v1.0.10

插件简介

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

支持以下基础功能：

普通文件上传

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

大文件断点续传：

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

其他附加功能

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

demo

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

基础使用

1. 项目下载 obs-upload-checkpoint

   npm install obs-upload-checkpoint

2. 引入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

返回值-Object

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

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

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对象，对象中可传属性值如下表：

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对象，对象中可传属性值如下表：

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对象，对象中可传属性值如下表：

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对象，对象中可传属性值如下表：

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

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