Browse Source

debug obs

tags/v0.1.8
Gitea 4 months ago
parent
commit
6378d27dfe
5 changed files with 6 additions and 308 deletions
  1. +1
    -0
      templates/base/head.tmpl
  2. +2
    -11
      templates/repo/datasets/index.tmpl
  3. +0
    -288
      web_src/js/components/MinioUploader.vue
  4. +0
    -6
      web_src/js/features/esdk-obs-browserjs-3.19.5.min.js
  5. +3
    -3
      webpack.config.js

+ 1
- 0
templates/base/head.tmpl View File

@@ -175,6 +175,7 @@
<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/theme-{{DefaultTheme}}.css?v={{MD5 AppVer}}">
{{end}}
{{template "custom/header" .}}

</head>
<body>
{{template "custom/body_outer_pre" .}}


+ 2
- 11
templates/repo/datasets/index.tmpl View File

@@ -1,7 +1,6 @@
{{template "base/head" .}}
<button id="test">点击</button>
<div class="repository release dataset-list view">
{{template "repo/header" .}}
{{template "repo/header" .}}
<form class="ui container" action="{{.Link}}" method="post">
<input name="id" value="{{.dataset.ID}}" type="hidden" />
<!--
@@ -51,7 +50,6 @@
</div>
</div>

<!-- 左侧数据集显示区域 -->
<div class="ui divider"></div>
<div class="ui stackable grid">
<div class="twelve wide column">
@@ -78,7 +76,6 @@
</div>
<div class="dataset ui middle very relaxed page">
<div class="column">

{{if .Permission.CanWrite $.UnitTypeDatasets}}
<div style='display:none;'
id="minioUploader-params"
@@ -108,7 +105,6 @@
</div>
{{if eq .StoreType "minio"}}
<div id="minioUploader"></div>

{{else}}
<div style="margin: 2em 0;"> {{.i18n.Tr "dropzone.enable_minio_support"}} </div>
{{end}}
@@ -122,8 +118,6 @@
</div>
</form>
</div>

<!-- 删除模态框 -->
<div class="ui small basic delete modal" id="data-dataset-delete-modal">
<div class="ui icon header">
<i class="trash icon"></i>
@@ -134,7 +128,4 @@
</div>
{{template "base/delete_modal_actions" .}}
</div>
{{template "base/footer" .}}


<!-- <script src="../web_src/js/features/esdk-obs-browserjs-3.19.5.min.js"></script> -->
{{template "base/footer" .}}

+ 0
- 288
web_src/js/components/MinioUploader.vue View File

@@ -1,288 +0,0 @@
<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 SparkMD5 from 'spark-md5';
import axios from 'axios';
import qs from 'qs';
// import esdk-obs-nodejs from 'esdk-obs-nodejs';
// import * as ObsClient from 'esdk-obs-nodejs'
import createDropzone from '../features/dropzone.js';
import * as ObsClient from '../features/esdk-obs-browserjs-3.19.5.min.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>';

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');
console.log("执行到我了")
this.resetStatus();
var file = document.getElementsByClassName('dropzone').files[0]
console.log("file", file)
// 创建ObsClient实例
var obsClient = new ObsClient({
access_key_id: 'FDP3LRMHLB9S77VWEHE3',
secret_access_key: 'LyM82Wk80pgjhs2z7AdDcsdpCWhbsJtSzQ7hkESN',
server : 'https://112.95.163.82'
});

var cp;
var hook;
obsClient.uploadFile({
Bucket : 'mybucket',
Key : this.get_result().key,
SourceFile : document.getElementsByClassName('dropzone').files[0],
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){
console.error('Error-->' + err);
// 出现错误,再次调用断点续传接口,继续上传任务
if(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);
}
}
});
},

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

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>

+ 0
- 6
web_src/js/features/esdk-obs-browserjs-3.19.5.min.js
File diff suppressed because it is too large
View File


+ 3
- 3
webpack.config.js View File

@@ -44,6 +44,9 @@ module.exports = {
filename: 'js/[name].js',
chunkFilename: 'js/[name].js',
},
node:{
fs: 'empty'
},
optimization: {
minimize: isProduction,
minimizer: [
@@ -87,9 +90,6 @@ module.exports = {
}
}
},
node: {
fs:'empty'
},
module: {
rules: [
{


Loading…
Cancel
Save