aiforge/web_src/js/components/MinioUploader.vue

<template>
  <div class="dropzone-wrapper dataset-files">
    <div
      id="dataset"
      class="dropzone"
    />

    <p class="upload-info">
      {{ file_status_text }}
      <span class="success">{{ status }}</span>
    </p>
  </div> 
</template>

<script>
/* eslint-disable eqeqeq */
// import Dropzone from 'dropzone/dist/dropzone.js';
// import 'dropzone/dist/dropzone.css'
import createDropzone from '../features/dropzone.js';
import ObsClient from 'esdk-obs-browserjs';

const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;

export default {
  data() {
    return {
      dropzoneUploader: null,
      maxFiles: 1,
      maxFilesize: 1 * 1024 * 1024 * 1024 * 1024,
      acceptedFiles: '*/*',
      progress: 0,
      status: '',
      dropzoneParams: {},
      file_status_text: ''
    };
  },

  async mounted() {
    this.dropzoneParams = $('div#minioUploader-params');
    this.file_status_text = this.dropzoneParams.data('file-status');
    this.status = this.dropzoneParams.data('file-init-status');

    let previewTemplate = '';
    previewTemplate += '<div class="dz-preview dz-file-preview">\n ';
    previewTemplate += '    <div class="dz-details">\n ';
    previewTemplate += '        <div class="dz-filename">';
    previewTemplate +=
      '            <span data-dz-name data-dz-thumbnail></span>';
    previewTemplate += '        </div>\n    ';
    previewTemplate += '        <div class="dz-size" data-dz-size></div>\n  ';
    previewTemplate += '    </div>\n  ';
    previewTemplate += '    <div class="dz-progress ui active progress">';
    previewTemplate +=
      '        <div class="dz-upload bar" data-dz-uploadprogress><div class="progress"></div></div>\n  ';
    previewTemplate += '    </div>\n  ';
    previewTemplate += '    <div class="dz-success-mark">';
    previewTemplate += '        <span>上传成功</span>';
    previewTemplate += '    </div>\n  ';
    previewTemplate += '    <div class="dz-error-mark">';
    previewTemplate += '        <span>上传失败</span>';
    previewTemplate += '    </div>\n  ';
    previewTemplate += '    <div class="dz-error-message">';
    previewTemplate += '        <span data-dz-errormessage></span>';
    previewTemplate += '    </div>\n';
    previewTemplate += '</div>';

    const $dropzone = $('div#dataset');
    console.log('createDropzone');

    const dropzoneUploader = await createDropzone($dropzone[0], {
      url: '/todouploader',
      maxFiles: this.maxFiles,
      maxFilesize: this.maxFileSize,
      timeout: 0,
      autoQueue: false,
      dictDefaultMessage: this.dropzoneParams.data('default-message'),
      dictInvalidFileType: this.dropzoneParams.data('invalid-input-type'),
      dictFileTooBig: this.dropzoneParams.data('file-too-big'),
      dictRemoveFile: this.dropzoneParams.data('remove-file'),
      previewTemplate,
    });

    // 文件发送前调用
    // dropzoneUploader.on('sending', (file, xhr, formData) => {
    //   console.log(xhr)
    //   console.log(formData)
    // });

    // 文件复制后触发
    dropzoneUploader.on('addedfile', (file) => {
      if(file.status == 'added'){
        this.onFileAdded(file)
      } 
    });

    dropzoneUploader.on('success', (file, res) => {
      this.emitDropzoneSuccess(file)
    });

    // dropzoneUploader.on('totaluploadprogress', function(file, progress){
    //   this.updateProgress(file, progress)
    // });

    dropzoneUploader.on('maxfilesexceeded', function (file) {
      if (this.files[0].status !== 'success') {
        alert(this.dropzoneParams.data('waitting-uploading'));
        this.removeFile(file);
        return;
      }
      this.removeAllFiles();
      this.addFile(file);
    });

    this.dropzoneUploader = dropzoneUploader;
  },

  methods: {
    resetStatus() {
      this.progress = 0;
      this.status = '';
    },
    updateProgress(file, progress) {
      file.previewTemplate.querySelector(
        '.dz-upload'
      ).style.width = `${progress}%`;
    },
    emitDropzoneSuccess(file) {
      file.status = 'success';
      this.dropzoneUploader.emit('success', file);
      this.dropzoneUploader.emit('complete', file);
      // this.finishUpload(file)
    },
    emitDropzoneFailed(file) {
      this.status = this.dropzoneParams.data('falied');
      file.status = 'error';
      this.dropzoneUploader.emit('error', file);
      // this.dropzoneUploader.emit('complete', file);
    },

    onFileAdded(file) {
      // file.datasetId = document
      //   .getElementById('datasetId')
      //   .getAttribute('datasetId');
      this.resetStatus();
      this.status = this.dropzoneParams.data('obs-connecting');
      console.log(this.dropzoneParams)
      console.log(this.status)
      this.do_uploader(file) 
    },

    get_result(){
      var res
      $.ajax({
        url: '/attachments/get_obs_key',
        type: 'GET',
        async: false,
        success: function(result){
          res = result
        }
      });
      return res
    },  

    getObsClient(){
      return new ObsClient({
        access_key_id: 'FDP3LRMHLB9S77VWEHE3',       
        secret_access_key: 'LyM82Wk80pgjhs2z7AdDcsdpCWhbsJtSzQ7hkESN',       
        server : 'https://obs.cn-south-222.ai.pcl.cn'
      });
    },

    do_uploader(file){
      // 创建ObsClient实例
      let obsClient = this.getObsClient()
      var cp;
      var hook;

      console.log(obsClient)
      obsClient.uploadFile({
        Bucket : 'testopendata',
        Key : this.get_result().key,
        SourceFile : file,
        PartSize : 64 * 1024 * 1024,
        // ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
        //   console.log(transferredAmount * 1.0 / totalSeconds / 1024);
        //   console.log(transferredAmount * 100.0 / totalAmount);
        //   if(hook && (transferredAmount / totalAmount) > 0.5){
        //       // 暂停断点续传任务
        //     hook.cancel();
        //   }
        // },
        EventCallback : function(eventType, eventParam, eventResult){
            // 处理事件响应
          console.log("1", eventType)
          console.log("2",eventParam)
          console.log("3",eventResult)
        },
        // ResumeCallback : function(resumeHook, uploadCheckpoint){
        //   // 获取取消断点续传上传任务控制参数
        //   hook = resumeHook;
        //   // 记录断点
        //   cp = uploadCheckpoint;
        // }
      }, function(err, result){
          
          // 出现错误，再次调用断点续传接口，继续上传任务
          if(err){
            console.error('Error-->' + err);
          //   obsClient.uploadFile({
          //       UploadCheckpoint : cp,
          //       ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
          //           console.log(transferredAmount * 1.0 / totalSeconds / 1024);
          //           console.log(transferredAmount * 100.0 / totalAmount);
          // //       },
          //       EventCallback : function(eventType, eventParam, eventResult){
          //         // 处理事件响应
          //         console.log(eventType)
          //         console.log(eventParam)
          //         console.log(eventResult)
          //       },
          //     }, function(err, result){
          //       if(err){
          //           console.error('Error-->' + err);
          //       }else{
          //           if(result.CommonMsg.Status < 300){
          //             console.log('RequestId-->' + result.InterfaceResult.RequestId);
          //             console.log('Bucket-->' + result.InterfaceResult.Bucket);
          //             console.log('Key-->' + result.InterfaceResult.Key);
          //             console.log('Location-->' + result.InterfaceResult.Location);
          //           }else{
          //             console.log('Code-->' + result.CommonMsg.Code);
          //             console.log('Message-->' + result.CommonMsg.Message);
          //           }
          //     }
          //   });
          }else {
              console.log('Status-->' + result.CommonMsg.Status);
              if (result.CommonMsg.Status < 300 && result.InterfaceResult) {
                      console.log('RequestId-->' + result.InterfaceResult.RequestId);
              }
          }
      });
    },


    finishUpload(file) {
      // $.ajax({
      //   url: '/attachments/add',
      //   type: 'POST',
      //   data: {
      //     'uuid': get_result().uuid,
      //     'file_name': filepath.split('/')[-1],
      //     'size': file.size,
      //     'dataset_id': file.datasetId,
      //     '_csrf': csrf,
      //     'type': 1
      //   },
      //   async: false,
      //   success: function (data) {
      //     console.log(data)
      //   }
      // })
      setTimeout(() => {
        window.location.reload();
      }, 1000);
    }

  }
};
</script>

<style>
.dropzone-wrapper {
  margin: 2em auto;
}
.ui .dropzone {
  border: 2px dashed #0087f5;
  box-shadow: none !important;
  padding: 0;
  min-height: 5rem;
  border-radius: 4px;
}
.dataset .dataset-files #dataset .dz-preview.dz-file-preview,
.dataset .dataset-files #dataset .dz-preview.dz-processing {
  display: flex;
  align-items: center;
}
.dataset .dataset-files #dataset .dz-preview {
  border-bottom: 1px solid #dadce0;
  min-height: 0;
}
</style>