@fly_tiger/tiger-upload

1.0.5 • Public • Published

ecph上传方法

::: demo

<div>
  <div>
    <el-upload
      action="/"
      :before-upload="beforeUpload"
      >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-button @click="handlerPause">暂停</el-button>
    <el-button @click="handlerRun">开始</el-button>
    <div v-for="item in (uploadList || [])">
      <div>{{(item || {}).Location}}</div>
    </div>
    <el-progress style="width: 200px;" :text-inside="true" :stroke-width="24" :percentage="percentage" status="success"></el-progress>
  </div>
</div>

<script>
export default {
   data() {
      return {
        percentage: 0,
        uploadList: [],
        multipartUpload: null,
        awsClient: null
      };
    },
    methods: {
      async handlerRun() {
        const result = await this.multipartUpload.reRun()
        this.uploadList.push(result)
      },
      handlerPause() {
        this.multipartUpload.pause()
      },
      async beforeUpload(file) {
        this.multipartUpload = this.awsClient.multipartUpload({
          file,
          progress: (percent) => {
            this.percentage = percent * 100;
          },
          breakpoint: () => {
            return new Promise((res, rej) => {
              this.$confirm('是否继续上传', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                res(true)
              }).catch(() => {  
                res(false)
              });
            })
          }
        })
        const result = await this.multipartUpload.run()
        fetch("http://test-api.flytiger.net/base/sysStorageCeph/anon/add", {
          method:"POST",
          mode: 'cors',
         headers: {
            'Content-Type': 'application/json'
         },
         body:JSON.stringify({
          'etag' : result.ETag,
            'filePath': result.Location
          })
          }).then(response => response.json()).then(json => {})
        this.uploadList.push(result)
        return false;
      }
    },
    mounted() {
      fetch("http://test-api.flytiger.net/base/sysStorageCeph/anon/getCephSignature")
      .then(res => res.json())
      .then(data => {
        const { accessKey: accessKeyId, bucket: Bucket, endpoint, secretKey: secretAccessKey } = data.data;
        this.awsClient = new AWSClient({
          accessKeyId,
          secretAccessKey,
          endpoint: `http://${endpoint}`,
          Bucket
        });
        console.log(this.awsClient)
      })
      console.log(AWSClient)
    }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

:::

Readme

Keywords

none

Package Sidebar

Install

npm i @fly_tiger/tiger-upload

Weekly Downloads

1

Version

1.0.5

License

ISC

Unpacked Size

13.4 kB

Total Files

5

Last publish

Collaborators

  • hctiger
  • rat1991
  • sailorlxj