zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

analyzing page update

Browse Source
This commit is contained in:
weijianli
2019-09-11 20:35:09 -05:00
parent e3cf5346f2
commit a6af009e43
6 changed files with 489 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/user.js
View File

@@ -23,10 +23,11 @@ export function logout() {
})
}
export function sendAnalyzeRequest() {
export function sendAnalyzeRequest(token) {
return request({
url: '/testpredict',
method: 'get',
baseURL: 'http://localhost:8010'
baseURL: 'http://localhost:8888',
params: { token }
})
}

79
src/components/VueUploader/index.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<div id="app">
<ul>
<li v-for="file in files" :key="file">{{ file.name }} - Error: {{ file.error }}, Success: {{ file.success }}</li>
</ul>
<file-upload
ref="upload"
v-model="files"
post-action="/post.method"
put-action="/put.method"
@input-file="inputFile"
@input-filter="inputFilter"
>
Upload file
</file-upload>
<button v-show="!$refs.upload || !$refs.upload.active" type="button" @click.prevent="$refs.upload.active = true">Start upload</button>
<button v-show="$refs.upload && $refs.upload.active" type="button" @click.prevent="$refs.upload.active = false">Stop upload</button>
</div>
</template>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-upload-component"></script>
<script>
Vue.component('file-upload', VueUploadComponent)
</script>
<script>
new Vue({
el: '#app',
data: function () {
return {
files: []
}
},
components: {
FileUpload: VueUploadComponent
},
methods: {
/**
* Has changed
* @param Object|undefined newFile Read only
* @param Object|undefined oldFile Read only
* @return undefined
*/
inputFile: function (newFile, oldFile) {
if (newFile && oldFile && !newFile.active && oldFile.active) {
// Get response data
console.log('response', newFile.response)
if (newFile.xhr) {
// Get the response status code
console.log('status', newFile.xhr.status)
}
}
},
/**
* Pretreatment
* @param Object|undefined newFile Read and write
* @param Object|undefined oldFile Read only
* @param Function prevent Prevent changing
* @return undefined
*/
inputFilter: function (newFile, oldFile, prevent) {
if (newFile && !oldFile) {
// Filter non-image file
if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
return prevent()
}
}
// Create a blob field
newFile.blob = ''
let URL = window.URL || window.webkitURL
if (URL && URL.createObjectURL) {
newFile.blob = URL.createObjectURL(newFile.file)
}
}
}
});
</script>

24
src/main.js
View File

@@ -41,18 +41,18 @@ Vue.use(Element, {
// register global utility filters
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
Vue.filter('formatSize', function(size) {
if (size > 1024 * 1024 * 1024 * 1024) {
return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB'
} else if (size > 1024 * 1024 * 1024) {
return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
} else if (size > 1024 * 1024) {
return (size / 1024 / 1024).toFixed(2) + ' MB'
} else if (size > 1024) {
return (size / 1024).toFixed(2) + ' KB'
}
return size.toString() + ' B'
})
Vue.filter('formatSize', function (size) {
if (size > 1024 * 1024 * 1024 * 1024) {
return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB'
} else if (size > 1024 * 1024 * 1024) {
return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
} else if (size > 1024 * 1024) {
return (size / 1024 / 1024).toFixed(2) + ' MB'
} else if (size > 1024) {
return (size / 1024).toFixed(2) + ' KB'
}
return size.toString() + ' B'
})
})
Vue.config.productionTip = false

13
src/router/index.js
View File

@@ -95,6 +95,19 @@ export const constantRoutes = [
}
]
},
{
path: '/analyzing',
hidden: true,
component: Layout,
children: [
{
path: 'haha',
component: ()=>import('@/views/Analyzing/analyzing'),
name: 'analyze',
meta: { title: 'analyzing' }
}
]
},
{
path: '/documentation',
component: Layout,

47
src/views/Analyzing/analyzing.vue
View File

@@ -1,3 +1,44 @@
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
<!-- <template>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
<span>hhahahahahahah</span>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hey Nic Raboy'
}
}
}
</script> -->
<template>
<div class="vue-spinner">
<Circle9></Circle9>
<h1>Analyzing....</h1>
</div>
</template>
<script>
import Circle9 from 'vue-loading-spinner/src/components/Circle9'
export default {
name: 'analyze',
components: {
Circle9
}
}
</script>
<style scoped>
.vue-spinner{
margin: 100px;
width: 50%;
height: 50%;
/*overflow: hidden;*/
}
</style>

648
src/views/VueUploader/index.vue
View File

@@ -1,296 +1,309 @@
<template>
<div class="example-full">
<button type="button" class="btn btn-danger float-right btn-is-option" @click.prevent="isOption = !isOption">
<i class="fa fa-cog" aria-hidden="true" />
Options
</button>
<h1 id="example-title" class="example-title">Data Uploader</h1>
<div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
<h3>Drop files to upload</h3>
</div>
<div v-show="!isOption" class="upload">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Thumb</th>
<th>Name</th>
<th>Size</th>
<th>Speed</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-if="!files.length">
<td colspan="7">
<div class="text-center p-5">
<h4>Drop files anywhere to upload<br>or</h4>
<label :for="name" class="btn btn-lg btn-primary">Select Files</label>
</div>
</td>
</tr>
<tr v-for="(file, index) in files" :key="file.id">
<td>{{ index }}</td>
<td>
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto">
<span v-else>No Image</span>
</td>
<td>
<div class="filename">
{{ file.name }}
</div>
<div v-if="file.active || file.progress !== '0.00'" class="progress">
<div :class="{'progress-bar': true, 'progress-bar-striped': true, 'bg-danger': file.error, 'progress-bar-animated': file.active}" role="progressbar" :style="{width: file.progress + '%'}">{{ file.progress }}%</div>
</div>
</td>
<td>{{ file.size | formatSize }}</td>
<td>{{ file.speed | formatSize }}</td>
<td v-if="file.error">{{ file.error }}</td>
<td v-else-if="file.success">success</td>
<td v-else-if="file.active">active</td>
<td v-else />
<td>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button">
Action
</button>
<div class="dropdown-menu">
<a :class="{'dropdown-item': true, disabled: file.active || file.success || file.error === 'compressing'}" href="#" @click.prevent="file.active || file.success || file.error === 'compressing' ? false : onEditFileShow(file)">Edit</a>
<a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
<a v-if="file.active" class="dropdown-item" href="#" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a>
<a v-else-if="file.error && file.error !== 'compressing' && $refs.upload.features.html5" class="dropdown-item" href="#" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a>
<a v-else :class="{'dropdown-item': true, disabled: file.success || file.error === 'compressing'}" href="#" @click.prevent="file.success || file.error === 'compressing' ? false : $refs.upload.update(file, {active: true})">Upload</a>
<div class="dropdown-divider" />
<a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="example-foorer">
<div class="footer-status float-right">
Drop: {{ $refs.upload ? $refs.upload.drop : false }},
Active: {{ $refs.upload ? $refs.upload.active : false }},
Uploaded: {{ $refs.upload ? $refs.upload.uploaded : true }},
Drop active: {{ $refs.upload ? $refs.upload.dropActive : false }}
</div>
<div class="btn-group">
<file-upload
class="btn btn-primary dropdown-toggle"
:post-action="postAction"
:put-action="putAction"
:extensions="extensions"
:accept="accept"
v-model="files"
:multiple="multiple"
:directory="directory"
ref="upload"
:size="size || 0"
:thread="thread < 1 ? 1 : (thread > 5 ? 5 : thread)"
:headers="headers"
:data="data"
:drop="drop"
:drop-directory="dropDirectory"
:add-index="addIndex"
@input-filter="inputFilter"
@input-file="inputFile"
>
<i class="fa fa-plus" />
Select
</file-upload>
<div class="dropdown-menu">
<label class="dropdown-item" :for="name">Add files</label>
<a class="dropdown-item" href="#" @click="onAddFolader">Add folder</a>
<a class="dropdown-item" href="#" @click.prevent="addData.show = true">Add data</a>
</div>
</div>
<button v-if="!$refs.upload || !$refs.upload.active" type="button" class="btn btn-success" @click.prevent="$refs.upload.active = true">
<i class="fa fa-arrow-up" aria-hidden="true" />
Start Upload
</button>
<button v-if="!$refs.upload || !$refs.upload.active" type="button" class="btn btn-warning" @click.prevent="onSendAnalyzeRequest">
Analyze
</button>
<button v-else type="button" class="btn btn-danger" @click.prevent="$refs.upload.active = false">
<i class="fa fa-stop" aria-hidden="true" />
Stop Upload
</button>
</div>
</div>
<div v-show="isOption" class="option">
<div class="form-group">
<label for="accept">Accept:</label>
<input id="accept" v-model="accept" type="text" class="form-control">
<small class="form-text text-muted">Allow upload mime type</small>
</div>
<div class="form-group">
<label for="extensions">Extensions:</label>
<input id="extensions" v-model="extensions" type="text" class="form-control">
<small class="form-text text-muted">Allow upload file extension</small>
</div>
<div class="form-group">
<label>PUT Upload:</label>
<div class="form-check">
<label class="form-check-label">
<input id="put-action" v-model="putAction" class="form-check-input" type="radio" name="put-action" value=""> Off
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input id="put-action" v-model="putAction" class="form-check-input" type="radio" name="put-action" value="/upload/put"> On
</label>
</div>
<small class="form-text text-muted">After the shutdown, use the POST method to upload</small>
</div>
<div class="form-group">
<label for="thread">Thread:</label>
<input id="thread" v-model.number="thread" type="number" max="5" min="1" class="form-control">
<small class="form-text text-muted">Also upload the number of files at the same time (number of threads)</small>
</div>
<div class="form-group">
<label for="size">Max size:</label>
<input id="size" v-model.number="size" type="number" min="0" class="form-control">
</div>
<div class="form-group">
<label for="minSize">Min size:</label>
<input id="minSize" v-model.number="minSize" type="number" min="0" class="form-control">
</div>
<div class="form-group">
<label for="autoCompress">Automatically compress:</label>
<input id="autoCompress" v-model.number="autoCompress" type="number" min="0" class="form-control">
<small v-if="autoCompress > 0" class="form-text text-muted">More than {{ autoCompress | formatSize }} files are automatically compressed</small>
<small v-else class="form-text text-muted">Set up automatic compression</small>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input id="add-index" v-model="addIndex" type="checkbox" class="form-check-input"> Start position to add
</label>
</div>
<small class="form-text text-muted">Add a file list to start the location to add</small>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input id="drop" v-model="drop" type="checkbox" class="form-check-input"> Drop
</label>
</div>
<small class="form-text text-muted">Drag and drop upload</small>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input id="drop-directory" v-model="dropDirectory" type="checkbox" class="form-check-input"> Drop directory
</label>
</div>
<small class="form-text text-muted">Not checked, filter the dragged folder</small>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input id="upload-auto" v-model="uploadAuto" type="checkbox" class="form-check-input"> Auto start
</label>
</div>
<small class="form-text text-muted">Automatically activate upload</small>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-lg btn-block" @click.prevent="isOption = !isOption">Confirm</button>
</div>
</div>
<div :class="{'modal-backdrop': true, 'fade': true, show: addData.show}" />
<div id="modal-add-data" :class="{modal: true, fade: true, show: addData.show}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add data</h5>
<button type="button" class="close" @click.prevent="addData.show = false">
<span>&times;</span>
</button>
</div>
<form @submit.prevent="onAddData">
<div class="modal-body">
<div class="form-group">
<label for="name">Name:</label>
<input id="name" v-model="addData.name" type="text" class="form-control" required placeholder="Please enter a file name">
<small class="form-text text-muted">Such as <code>filename.txt</code></small>
</div>
<div class="form-group">
<label for="type">Type:</label>
<input id="type" v-model="addData.type" type="text" class="form-control" required placeholder="Please enter the MIME type">
<small class="form-text text-muted">Such as <code>text/plain</code></small>
</div>
<div class="form-group">
<label for="content">Content:</label>
<textarea id="content" v-model="addData.content" class="form-control" required rows="3" placeholder="Please enter the file contents" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click.prevent="addData.show = false">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<div :class="{'modal-backdrop': true, 'fade': true, show: editFile.show}" />
<div id="modal-edit-file" :class="{modal: true, fade: true, show: editFile.show}" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit file</h5>
<button type="button" class="close" @click.prevent="editFile.show = false">
<span>&times;</span>
</button>
</div>
<form @submit.prevent="onEditorFile">
<div class="modal-body">
<div class="form-group">
<label for="name">Name:</label>
<input id="name" v-model="editFile.name" type="text" class="form-control" required placeholder="Please enter a file name">
</div>
<div v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'" class="form-group">
<label>Image: </label>
<div class="edit-image">
<img ref="editImage" :src="editFile.blob">
</div>
<div class="edit-image-tool">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" title="cropper.rotate(-90)" @click="editFile.cropper.rotate(-90)"><i class="fa fa-undo" aria-hidden="true" /></button>
<button type="button" class="btn btn-primary" title="cropper.rotate(90)" @click="editFile.cropper.rotate(90)"><i class="fa fa-repeat" aria-hidden="true" /></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" title="cropper.crop()" @click="editFile.cropper.crop()"><i class="fa fa-check" aria-hidden="true" /></button>
<button type="button" class="btn btn-primary" title="cropper.clear()" @click="editFile.cropper.clear()"><i class="fa fa-remove" aria-hidden="true" /></button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click.prevent="editFile.show = false">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="example-full">
<button type="button" class="btn btn-danger float-right btn-is-option" @click.prevent="isOption = !isOption">
<i class="fa fa-cog" aria-hidden="true"></i>
Options
</button>
<h1 id="example-title" class="example-title">Data Uploader</h1>
<div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
<h3>Drop files to upload</h3>
</div>
<div class="upload" v-show="!isOption">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Thumb</th>
<th>Name</th>
<th>Size</th>
<th>Speed</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-if="!files.length">
<td colspan="7">
<div class="text-center p-5">
<h4>Drop files anywhere to upload<br/>or</h4>
<label :for="name" class="btn btn-lg btn-primary">Select Files</label>
</div>
</td>
</tr>
<tr v-for="(file, index) in files" :key="file.id">
<td>{{index}}</td>
<td>
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
<span v-else>No Image</span>
</td>
<td>
<div class="filename">
{{file.name}}
</div>
<div class="progress" v-if="file.active || file.progress !== '0.00'">
<div :class="{'progress-bar': true, 'progress-bar-striped': true, 'bg-danger': file.error, 'progress-bar-animated': file.active}" role="progressbar" :style="{width: file.progress + '%'}">{{file.progress}}%</div>
</div>
</td>
<td>{{file.size | formatSize}}</td>
<td>{{file.speed | formatSize}}</td>
<td v-if="file.error">{{file.error}}</td>
<td v-else-if="file.success">success</td>
<td v-else-if="file.active">active</td>
<td v-else></td>
<td>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button">
Action
</button>
<div class="dropdown-menu">
<a :class="{'dropdown-item': true, disabled: file.active || file.success || file.error === 'compressing'}" href="#" @click.prevent="file.active || file.success || file.error === 'compressing' ? false : onEditFileShow(file)">Edit</a>
<a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
<a class="dropdown-item" href="#" v-if="file.active" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a>
<a class="dropdown-item" href="#" v-else-if="file.error && file.error !== 'compressing' && $refs.upload.features.html5" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a>
<a :class="{'dropdown-item': true, disabled: file.success || file.error === 'compressing'}" href="#" v-else @click.prevent="file.success || file.error === 'compressing' ? false : $refs.upload.update(file, {active: true})">Upload</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="example-foorer">
<div class="footer-status float-right">
Drop: {{$refs.upload ? $refs.upload.drop : false}},
Active: {{$refs.upload ? $refs.upload.active : false}},
Uploaded: {{$refs.upload ? $refs.upload.uploaded : true}},
Drop active: {{$refs.upload ? $refs.upload.dropActive : false}}
</div>
<div class="btn-group">
<file-upload
class="btn btn-primary dropdown-toggle"
:post-action="postAction"
:put-action="putAction"
:extensions="extensions"
:accept="accept"
:multiple="multiple"
:directory="directory"
:size="size || 0"
:thread="thread < 1 ? 1 : (thread > 5 ? 5 : thread)"
:headers="headers"
:data="data"
:drop="drop"
:drop-directory="dropDirectory"
:add-index="addIndex"
v-model="files"
@input-filter="inputFilter"
@input-file="inputFile"
ref="upload">
<i class="fa fa-plus"></i>
Select
</file-upload>
<div class="dropdown-menu">
<label class="dropdown-item" :for="name">Add files</label>
<a class="dropdown-item" href="#" @click="onAddFolader">Add folder</a>
<a class="dropdown-item" href="#" @click.prevent="addData.show = true">Add data</a>
</div>
</div>
<button type="button" class="btn btn-success" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
Start Upload
</button>
<button type="button" class="btn btn-warning" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="onSendAnalyzeRequest">
Analyze
</button>
<button type="button" class="btn btn-danger" v-else @click.prevent="$refs.upload.active = false">
<i class="fa fa-stop" aria-hidden="true"></i>
Stop Upload
</button>
</div>
</div>
<div class="option" v-show="isOption">
<div class="form-group">
<label for="accept">Accept:</label>
<input type="text" id="accept" class="form-control" v-model="accept">
<small class="form-text text-muted">Allow upload mime type</small>
</div>
<div class="form-group">
<label for="extensions">Extensions:</label>
<input type="text" id="extensions" class="form-control" v-model="extensions">
<small class="form-text text-muted">Allow upload file extension</small>
</div>
<div class="form-group">
<label>PUT Upload:</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="put-action" id="put-action" value="" v-model="putAction"> Off
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="put-action" id="put-action" value="/upload/put" v-model="putAction"> On
</label>
</div>
<small class="form-text text-muted">After the shutdown, use the POST method to upload</small>
</div>
<div class="form-group">
<label for="thread">Thread:</label>
<input type="number" max="5" min="1" id="thread" class="form-control" v-model.number="thread">
<small class="form-text text-muted">Also upload the number of files at the same time (number of threads)</small>
</div>
<div class="form-group">
<label for="size">Max size:</label>
<input type="number" min="0" id="size" class="form-control" v-model.number="size">
</div>
<div class="form-group">
<label for="minSize">Min size:</label>
<input type="number" min="0" id="minSize" class="form-control" v-model.number="minSize">
</div>
<div class="form-group">
<label for="autoCompress">Automatically compress:</label>
<input type="number" min="0" id="autoCompress" class="form-control" v-model.number="autoCompress">
<small class="form-text text-muted" v-if="autoCompress > 0">More than {{autoCompress | formatSize}} files are automatically compressed</small>
<small class="form-text text-muted" v-else>Set up automatic compression</small>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="add-index" class="form-check-input" v-model="addIndex"> Start position to add
</label>
</div>
<small class="form-text text-muted">Add a file list to start the location to add</small>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="drop" class="form-check-input" v-model="drop"> Drop
</label>
</div>
<small class="form-text text-muted">Drag and drop upload</small>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="drop-directory" class="form-check-input" v-model="dropDirectory"> Drop directory
</label>
</div>
<small class="form-text text-muted">Not checked, filter the dragged folder</small>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="upload-auto" class="form-check-input" v-model="uploadAuto"> Auto start
</label>
</div>
<small class="form-text text-muted">Automatically activate upload</small>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-lg btn-block" @click.prevent="isOption = !isOption">Confirm</button>
</div>
</div>
<div :class="{'modal-backdrop': true, 'fade': true, show: addData.show}"></div>
<div :class="{modal: true, fade: true, show: addData.show}" id="modal-add-data" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add data</h5>
<button type="button" class="close" @click.prevent="addData.show = false">
<span>&times;</span>
</button>
</div>
<form @submit.prevent="onAddData">
<div class="modal-body">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" required id="name" placeholder="Please enter a file name" v-model="addData.name">
<small class="form-text text-muted">Such as <code>filename.txt</code></small>
</div>
<div class="form-group">
<label for="type">Type:</label>
<input type="text" class="form-control" required id="type" placeholder="Please enter the MIME type" v-model="addData.type">
<small class="form-text text-muted">Such as <code>text/plain</code></small>
</div>
<div class="form-group">
<label for="content">Content:</label>
<textarea class="form-control" required id="content" rows="3" placeholder="Please enter the file contents" v-model="addData.content"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click.prevent="addData.show = false">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<div :class="{'modal-backdrop': true, 'fade': true, show: editFile.show}"></div>
<div :class="{modal: true, fade: true, show: editFile.show}" id="modal-edit-file" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit file</h5>
<button type="button" class="close" @click.prevent="editFile.show = false">
<span>&times;</span>
</button>
</div>
<form @submit.prevent="onEditorFile">
<div class="modal-body">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" required id="name" placeholder="Please enter a file name" v-model="editFile.name">
</div>
<div class="form-group" v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'">
<label>Image: </label>
<div class="edit-image">
<img :src="editFile.blob" ref="editImage" />
</div>
<div class="edit-image-tool">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" @click="editFile.cropper.rotate(-90)" title="cropper.rotate(-90)"><i class="fa fa-undo" aria-hidden="true"></i></button>
<button type="button" class="btn btn-primary" @click="editFile.cropper.rotate(90)" title="cropper.rotate(90)"><i class="fa fa-repeat" aria-hidden="true"></i></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" @click="editFile.cropper.crop()" title="cropper.crop()"><i class="fa fa-check" aria-hidden="true"></i></button>
<button type="button" class="btn btn-primary" @click="editFile.cropper.clear()" title="cropper.clear()"><i class="fa fa-remove" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click.prevent="editFile.show = false">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import ImageCompressor from '@xkeshi/image-compressor'
@@ -300,7 +313,7 @@ import { sendAnalyzeRequest } from '@/api/user'
// import 'bootstrap/dist/css/bootstrap.min.css'
export default {
components: {
FileUpload
FileUpload,
},
data() {
return {
@@ -319,12 +332,12 @@ export default {
thread: 3,
name: 'file',
postAction: '/upload/post',
putAction: 'http://localhost:8010/uploader',
putAction: 'http://localhost:8888/uploader',
headers: {
// 'X-Csrf-Token': 'xxxx',
'X-Csrf-Token': 'xxxx',
},
data: {
// '_csrf_token': 'xxxxxx',
'_csrf_token': 'xxxxxx',
},
autoCompress: 1024 * 1024,
uploadAuto: false,
@@ -333,11 +346,11 @@ export default {
show: false,
name: '',
type: '',
content: ''
content: '',
},
editFile: {
show: false,
name: ''
name: '',
}
}
},
@@ -348,12 +361,12 @@ export default {
this.$refs.upload.update(this.editFile.id, { error: this.editFile.error || '' })
}
if (newValue) {
this.$nextTick(function() {
this.$nextTick(function () {
if (!this.$refs.editImage) {
return
}
const cropper = new Cropper(this.$refs.editImage, {
autoCrop: false
let cropper = new Cropper(this.$refs.editImage, {
autoCrop: false,
})
this.editFile = {
...this.editFile,
@@ -368,7 +381,7 @@ export default {
this.addData.type = ''
this.addData.content = ''
}
}
},
},
methods: {
inputFilter(newFile, oldFile, prevent) {
@@ -392,7 +405,7 @@ export default {
const imageCompressor = new ImageCompressor(null, {
convertSize: Infinity,
maxWidth: 512,
maxHeight: 512
maxHeight: 512,
})
imageCompressor.compress(newFile.file)
.then((file) => {
@@ -407,7 +420,7 @@ export default {
// Create a blob field
// 创建 blob 字段
newFile.blob = ''
const URL = window.URL || window.webkitURL
let URL = window.URL || window.webkitURL
if (URL && URL.createObjectURL) {
newFile.blob = URL.createObjectURL(newFile.file)
}
@@ -469,12 +482,12 @@ export default {
this.editFile.show = false
return
}
const data = {
name: this.editFile.name
let data = {
name: this.editFile.name,
}
if (this.editFile.cropper) {
const binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1])
const arr = new Uint8Array(binStr.length)
let binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1])
let arr = new Uint8Array(binStr.length)
for (let i = 0; i < binStr.length; i++) {
arr[i] = binStr.charCodeAt(i)
}
@@ -491,7 +504,7 @@ export default {
this.alert('Your browser does not support')
return
}
const input = this.$refs.upload.$el.querySelector('input')
let input = this.$refs.upload.$el.querySelector('input')
input.directory = true
input.webkitdirectory = true
this.directory = true
@@ -509,26 +522,35 @@ export default {
this.alert('Your browser does not support')
return
}
const file = new window.File([this.addData.content], this.addData.name, {
type: this.addData.type
let file = new window.File([this.addData.content], this.addData.name, {
type: this.addData.type,
})
this.$refs.upload.add(file)
},
onSendAnalyzeRequest() {
this.listLoading = true
sendAnalyzeRequest().then(response => {
this.$router.push({ name: "analyze" })
this.listLoading = true
sendAnalyzeRequest().then(response => {
console.log("success!")
this.list = response.data.items
this.listLoading = false
// if the response from the server indicating that it's running the analysis, then redirect to a loading view
if (this.list.indexOf('anylyzing') >= 0) {
// this.$router.push('@/views/Analyzing/analyzing')
// sendAnalyzeRequest().then(response => {
// this.list = response.data.items
// this.listLoading = false
// }
}
})
}
}
}
</script>
<style>
@@ -609,6 +631,7 @@ export default {
}
</style>
<!-- <template>
<div class="app-container">
<ul>
@@ -696,6 +719,11 @@ export default {
import 'vue-upload-component/dist/vue-upload-component.part.css'
@import "vue-upload-component/dist/vue-upload-component.part.css"
.file-uploads {
overflow: hidden;
position: relative;
@@ -723,4 +751,4 @@ import 'vue-upload-component/dist/vue-upload-component.part.css'
opacity: 0;
}
</style>
-->
-->