aiforge/web_src/js/components/MinioUploader.vue

<template>
  <div class="dropzone-wrapper dataset-files">
    <div
      id="dataset"
      class="dropzone"
    />
      <!-- <form class="dropzone" action="/todouploader">
        <div class="fallback"> 
            <input name="file" type="file"/> 
        </div>
      </form> -->

    <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 SparkMD5 from 'spark-md5';
import axios from 'axios';
import qs from 'qs';
import createDropzone from '../features/dropzone.js';

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>';

    // var fileArr = new Array();
    //     jQuery(function($){
    //        Dropzone.autoDiscover = true;
    //        Dropzone.options.myAwesomeDropzone = false;
    //     try {
	  //       $(".dropzone").dropzone({
		//         url:"/todouploader",
		//         method:"post",
		//         paramName:"file",
		//         autoProcessQueue:true,//自动上传
		//         maxFilesize:1 * 1024 * 1024 * 1024 * 1024, // MB
	  //           acceptedFiles:"*/*",
	  //           dictInvalidFileType:"无效的文件类型",
	  //           addRemoveLinks:true,
	  //           maxFiles: 1,  //指的是上传目录下的最大文件数
	  //           // dictRemoveFile:"移除文件",
	  //           dictDefaultMessage:
	  //           "<span class='bigger-150 bolder'><i class='icon-caret-right red'></i>拖动文件</span>上传\
	  //           <span class='smaller-80 gre'>(或者点击上传)</span> <br /> \
	  //           <i class='upload-icon icon-cloud-upload blue icon-3x'></i>",
	  //           dictResponseError:"文件上传失败!",
	  //           dictFileTooBig:"文件过大,上传失败!",
	  //           previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span>上传成功</span></div>\n  <div class=\"dz-error-mark\"><span>上传失败</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
	  //         	init:function(){
	  //             	this.on("addedfile",function(file,data) {
	  //                 	fileArr.push(file.upload.uuid);
	  //                 	//解决点击时重复发送请求
	  //                 	$(".dz-remove").each(function(index) {
	  //                       if(!$(".dz-remove:eq(" + index + ")").attr("id")) {
	  //                           $(".dz-remove:eq(" + index + ")").attr("id",fileArr[index]);
	  //                       }
	  //                  	})   
	  //            	}),

    //           		this.on("success",function(file,data){
	  //                 //var myDropzone = this;
	  //                  	$("#" + file.upload.uuid).click(function() {
    //                       	var fileName = $(this).parent().find(".dz-filename").text();
    //                       	console.log(fileName )    
	  //                 	})   
	  //             	});
	              
	  //             this.on("complete",function(file) {
    //                   if(file.status == "canceled" || file.status == "error") {
    //                       var fileName = $("#" + file.upload.uuid).parent().find(".dz-filename").text();
    //                       // setTimeout(function() {
    //                       //       $.ajax({
    //                       //           type:"POST",
    //                       //           url:"${pageContext.request.contextPath}/uploadController/delete.action",
    //                       //           data:{"fileName":fileName},
    //                       //           dataType:"json",
    //                       //           success:function(data){
	  //                       //               if(data == "success") {
	  //                       //                   // alert("删除成功");
	  //                       //               }
    //                       //          },
    //                       //          error:function(ajax) {
    //                       //              alert(ajax.status);
    //                       //          }
    //                       //     }) 
    //                       // },2000);
	  //                 }
	  //             }) 
	              
	  //         	}
	  //       });
    //   	} catch(e) {
    //     alert('Dropzone.js does not support older browsers!');
    //  	}
		// });



    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('addedfile', (file) => {
      setTimeout(() => {
        // eslint-disable-next-line no-unused-expressions
        file.accepted && this.onFileAdded(file);
      }, 200);
    });
    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}%`;
    },

    onFileAdded(file) {
      file.datasetId = document
        .getElementById('datasetId')
        .getAttribute('datasetId');
      this.resetStatus();
      // this.computeMD5(file);
    },

    // finishUpload(file) {
    //   this.emitDropzoneSuccess(file);
    //   setTimeout(() => {
    //     window.location.reload();
    //   }, 1000);
    // },

    fileLoaded(e) {
        this.updateProgress(file, ((currentChunk / chunks) * 100).toFixed(2));
    },

    // async computeMD5Success(md5edFile) {
    //   async function addAttachment(file) {
    //     return await axios.post(
    //       '/attachments/add',
    //       qs.stringify({
    //         uuid: file.uuid,
    //         file_name: file.name,
    //         size: file.size,
    //         dataset_id: file.datasetId,
    //         _csrf: csrf
    //       })
    //     );
    //   }
    // },


    async newMultiUpload(file) {
      const res = await axios.get('/attachments/new_multipart', {
        params: {
          totalChunkCounts: file.totalChunkCounts,
          md5: file.uniqueIdentifier,
          size: file.size,
          fileType: file.type,
          _csrf: csrf
        }
      });
      file.uploadID = res.data.uploadID;
      file.uuid = res.data.uuid;
    },

    multipartUpload(file) {
      async function updateChunk(currentChunk) {
        await axios.post(
          '/attachments/update_chunk',
          qs.stringify({
            uuid: file.uuid,
            chunkNumber: currentChunk + 1,
            etag: etags[currentChunk],
            _csrf: csrf
          })
        );
      }

      async function completeUpload() {
        return await axios.post(
          '/attachments/complete_multipart',
          qs.stringify({
            uuid: file.uuid,
            uploadID: file.uploadID,
            file_name: file.name,
            size: file.size,
            dataset_id: file.datasetId,
            _csrf: csrf
          })
        );
      }

      const successChunks = [];
      let successParts = [];
      successParts = file.chunks.split(',');
      for (let i = 0; i < successParts.length; i++) {
        successChunks[i] = successParts[i].split('-')[0];
      }

    }
  }
};
</script>

<style>
/* .fallback {
  border: 1px white solid;
}

button, input {
    overflow: visible;
    width: 100%;
    height: 15%;
    opacity: 0;
} */

.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>