button fixed
This commit is contained in:
		| @@ -27,7 +27,7 @@ export function sendAnalyzeRequest(token) { | |||||||
|   return request({ |   return request({ | ||||||
|     url: '/testpredict', |     url: '/testpredict', | ||||||
|     method: 'get', |     method: 'get', | ||||||
|     baseURL: 'http://localhost:8888', |     baseURL: 'http://localhost:8010', | ||||||
|     params: { token } |     params: { token } | ||||||
|   }) |   }) | ||||||
| } | } | ||||||
|   | |||||||
| @@ -44,9 +44,9 @@ service.interceptors.response.use( | |||||||
|    */ |    */ | ||||||
|   response => { |   response => { | ||||||
|     const res = response.data |     const res = response.data | ||||||
|  |     var x = false | ||||||
|     // if the custom code is not 20000, it is judged as an error. |     // if the custom code is not 20000, it is judged as an error. | ||||||
|     if (res.code !== 20000) { |     if (x) { | ||||||
|       Message({ |       Message({ | ||||||
|         message: res.message || 'Error', |         message: res.message || 'Error', | ||||||
|         type: 'error', |         type: 'error', | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <template> | <template> | ||||||
| <div class="example-full"> |   <div class="example-full"> | ||||||
|     <button type="button" class="btn btn-danger float-right btn-is-option" @click.prevent="isOption = !isOption"> |     <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> |       <i class="fa fa-cog" aria-hidden="true" /> | ||||||
|       Options |       Options | ||||||
|     </button> |     </button> | ||||||
|     <h1 id="example-title" class="example-title">Data Uploader</h1> |     <h1 id="example-title" class="example-title">Data Uploader</h1> | ||||||
| @@ -9,7 +9,7 @@ | |||||||
|     <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active"> |     <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active"> | ||||||
|       <h3>Drop files to upload</h3> |       <h3>Drop files to upload</h3> | ||||||
|     </div> |     </div> | ||||||
|   <div class="upload" v-show="!isOption"> |     <div v-show="!isOption" class="upload"> | ||||||
|       <div class="table-responsive"> |       <div class="table-responsive"> | ||||||
|         <table class="table table-hover"> |         <table class="table table-hover"> | ||||||
|           <thead> |           <thead> | ||||||
| @@ -27,32 +27,32 @@ | |||||||
|             <tr v-if="!files.length"> |             <tr v-if="!files.length"> | ||||||
|               <td colspan="7"> |               <td colspan="7"> | ||||||
|                 <div class="text-center p-5"> |                 <div class="text-center p-5"> | ||||||
|                 <h4>Drop files anywhere to upload<br/>or</h4> |                   <h4>Drop files anywhere to upload<br>or</h4> | ||||||
|                   <label :for="name" class="btn btn-lg btn-primary">Select Files</label> |                   <label :for="name" class="btn btn-lg btn-primary">Select Files</label> | ||||||
|                 </div> |                 </div> | ||||||
|               </td> |               </td> | ||||||
|             </tr> |             </tr> | ||||||
|             <tr v-for="(file, index) in files" :key="file.id"> |             <tr v-for="(file, index) in files" :key="file.id"> | ||||||
|             <td>{{index}}</td> |               <td>{{ index }}</td> | ||||||
|               <td> |               <td> | ||||||
|               <img v-if="file.thumb" :src="file.thumb" width="40" height="auto" /> |                 <img v-if="file.thumb" :src="file.thumb" width="40" height="auto"> | ||||||
|                 <span v-else>No Image</span> |                 <span v-else>No Image</span> | ||||||
|               </td> |               </td> | ||||||
|               <td> |               <td> | ||||||
|                 <div class="filename"> |                 <div class="filename"> | ||||||
|                 {{file.name}} |                   {{ file.name }} | ||||||
|                 </div> |                 </div> | ||||||
|               <div class="progress" v-if="file.active || file.progress !== '0.00'"> |                 <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 :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> |                 </div> | ||||||
|               </td> |               </td> | ||||||
|             <td>{{file.size | formatSize}}</td> |               <td>{{ file.size | formatSize }}</td> | ||||||
|             <td>{{file.speed | formatSize}}</td> |               <td>{{ file.speed | formatSize }}</td> | ||||||
|  |  | ||||||
|             <td v-if="file.error">{{file.error}}</td> |               <td v-if="file.error">{{ file.error }}</td> | ||||||
|               <td v-else-if="file.success">success</td> |               <td v-else-if="file.success">success</td> | ||||||
|               <td v-else-if="file.active">active</td> |               <td v-else-if="file.active">active</td> | ||||||
|             <td v-else></td> |               <td v-else /> | ||||||
|               <td> |               <td> | ||||||
|                 <div class="btn-group"> |                 <div class="btn-group"> | ||||||
|                   <button class="btn btn-secondary btn-sm dropdown-toggle" type="button"> |                   <button class="btn btn-secondary btn-sm dropdown-toggle" type="button"> | ||||||
| @@ -62,11 +62,11 @@ | |||||||
|                     <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 || 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': 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 v-if="file.active" class="dropdown-item" href="#" @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 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 :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> |                     <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"></div> |                     <div class="dropdown-divider" /> | ||||||
|                     <a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a> |                     <a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a> | ||||||
|                   </div> |                   </div> | ||||||
|                 </div> |                 </div> | ||||||
| @@ -77,13 +77,15 @@ | |||||||
|       </div> |       </div> | ||||||
|       <div class="example-foorer"> |       <div class="example-foorer"> | ||||||
|         <div class="footer-status float-right"> |         <div class="footer-status float-right"> | ||||||
|         Drop: {{$refs.upload ? $refs.upload.drop : false}}, |           Drop: {{ $refs.upload ? $refs.upload.drop : false }}, | ||||||
|         Active: {{$refs.upload ? $refs.upload.active : false}}, |           Active: {{ $refs.upload ? $refs.upload.active : false }}, | ||||||
|         Uploaded: {{$refs.upload ? $refs.upload.uploaded : true}}, |           Uploaded: {{ $refs.upload ? $refs.upload.uploaded : true }}, | ||||||
|         Drop active: {{$refs.upload ? $refs.upload.dropActive : false}} |           Drop active: {{ $refs.upload ? $refs.upload.dropActive : false }} | ||||||
|         </div> |         </div> | ||||||
|         <div class="btn-group"> |         <div class="btn-group"> | ||||||
|           <file-upload |           <file-upload | ||||||
|  |             ref="upload" | ||||||
|  |             v-model="files" | ||||||
|             class="btn btn-primary dropdown-toggle" |             class="btn btn-primary dropdown-toggle" | ||||||
|             :post-action="postAction" |             :post-action="postAction" | ||||||
|             :put-action="putAction" |             :put-action="putAction" | ||||||
| @@ -98,11 +100,10 @@ | |||||||
|             :drop="drop" |             :drop="drop" | ||||||
|             :drop-directory="dropDirectory" |             :drop-directory="dropDirectory" | ||||||
|             :add-index="addIndex" |             :add-index="addIndex" | ||||||
|           v-model="files" |  | ||||||
|             @input-filter="inputFilter" |             @input-filter="inputFilter" | ||||||
|             @input-file="inputFile" |             @input-file="inputFile" | ||||||
|           ref="upload"> |           > | ||||||
|           <i class="fa fa-plus"></i> |             <i class="fa fa-plus" /> | ||||||
|             Select |             Select | ||||||
|           </file-upload> |           </file-upload> | ||||||
|           <div class="dropdown-menu"> |           <div class="dropdown-menu"> | ||||||
| @@ -111,73 +112,69 @@ | |||||||
|             <a class="dropdown-item" href="#" @click.prevent="addData.show = true">Add data</a> |             <a class="dropdown-item" href="#" @click.prevent="addData.show = true">Add data</a> | ||||||
|           </div> |           </div> | ||||||
|         </div> |         </div> | ||||||
|       <button type="button" class="btn btn-success" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true"> |         <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"></i> |           <i class="fa fa-arrow-up" aria-hidden="true" /> | ||||||
|           Start Upload |           Start Upload | ||||||
|         </button> |         </button> | ||||||
|       <button type="button" class="btn btn-warning" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="onSendAnalyzeRequest"> |         <button v-if="!$refs.upload || !$refs.upload.active" type="button" class="btn btn-warning" @click.prevent="onSendAnalyzeRequest"> | ||||||
|           Analyze |           Analyze | ||||||
|         </button> |         </button> | ||||||
|       <button type="button" class="btn btn-danger"  v-else @click.prevent="$refs.upload.active = false"> |         <button v-else type="button" class="btn btn-danger" @click.prevent="$refs.upload.active = false"> | ||||||
|         <i class="fa fa-stop" aria-hidden="true"></i> |           <i class="fa fa-stop" aria-hidden="true" /> | ||||||
|           Stop Upload |           Stop Upload | ||||||
|         </button> |         </button> | ||||||
|       </div> |       </div> | ||||||
|     </div> |     </div> | ||||||
|  |  | ||||||
|  |     <div v-show="isOption" class="option"> | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
|   <div class="option" v-show="isOption"> |  | ||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <label for="accept">Accept:</label> |         <label for="accept">Accept:</label> | ||||||
|       <input type="text" id="accept" class="form-control" v-model="accept"> |         <input id="accept" v-model="accept" type="text" class="form-control"> | ||||||
|         <small class="form-text text-muted">Allow upload mime type</small> |         <small class="form-text text-muted">Allow upload mime type</small> | ||||||
|       </div> |       </div> | ||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <label for="extensions">Extensions:</label> |         <label for="extensions">Extensions:</label> | ||||||
|       <input type="text" id="extensions" class="form-control" v-model="extensions"> |         <input id="extensions" v-model="extensions" type="text" class="form-control"> | ||||||
|         <small class="form-text text-muted">Allow upload file extension</small> |         <small class="form-text text-muted">Allow upload file extension</small> | ||||||
|       </div> |       </div> | ||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <label>PUT Upload:</label> |         <label>PUT Upload:</label> | ||||||
|         <div class="form-check"> |         <div class="form-check"> | ||||||
|           <label class="form-check-label"> |           <label class="form-check-label"> | ||||||
|           <input class="form-check-input" type="radio" name="put-action" id="put-action" value="" v-model="putAction"> Off |             <input id="put-action" v-model="putAction" class="form-check-input" type="radio" name="put-action" value=""> Off | ||||||
|           </label> |           </label> | ||||||
|         </div> |         </div> | ||||||
|         <div class="form-check"> |         <div class="form-check"> | ||||||
|           <label class="form-check-label"> |           <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 |             <input id="put-action" v-model="putAction" class="form-check-input" type="radio" name="put-action" value="/upload/put"> On | ||||||
|           </label> |           </label> | ||||||
|         </div> |         </div> | ||||||
|         <small class="form-text text-muted">After the shutdown, use the POST method to upload</small> |         <small class="form-text text-muted">After the shutdown, use the POST method to upload</small> | ||||||
|       </div> |       </div> | ||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <label for="thread">Thread:</label> |         <label for="thread">Thread:</label> | ||||||
|       <input type="number" max="5" min="1" id="thread" class="form-control" v-model.number="thread"> |         <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> |         <small class="form-text text-muted">Also upload the number of files at the same time (number of threads)</small> | ||||||
|       </div> |       </div> | ||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <label for="size">Max size:</label> |         <label for="size">Max size:</label> | ||||||
|       <input type="number" min="0" id="size" class="form-control" v-model.number="size"> |         <input id="size" v-model.number="size" type="number" min="0" class="form-control"> | ||||||
|       </div> |       </div> | ||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <label for="minSize">Min size:</label> |         <label for="minSize">Min size:</label> | ||||||
|       <input type="number" min="0" id="minSize" class="form-control" v-model.number="minSize"> |         <input id="minSize" v-model.number="minSize" type="number" min="0" class="form-control"> | ||||||
|       </div> |       </div> | ||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <label for="autoCompress">Automatically compress:</label> |         <label for="autoCompress">Automatically compress:</label> | ||||||
|       <input type="number" min="0" id="autoCompress" class="form-control" v-model.number="autoCompress"> |         <input id="autoCompress" v-model.number="autoCompress" type="number" min="0" class="form-control"> | ||||||
|       <small class="form-text text-muted" v-if="autoCompress > 0">More than {{autoCompress | formatSize}} files are automatically compressed</small> |         <small v-if="autoCompress > 0" class="form-text text-muted">More than {{ autoCompress | formatSize }} files are automatically compressed</small> | ||||||
|       <small class="form-text text-muted" v-else>Set up automatic compression</small> |         <small v-else class="form-text text-muted">Set up automatic compression</small> | ||||||
|       </div> |       </div> | ||||||
|  |  | ||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <div class="form-check"> |         <div class="form-check"> | ||||||
|           <label class="form-check-label"> |           <label class="form-check-label"> | ||||||
|           <input type="checkbox" id="add-index" class="form-check-input" v-model="addIndex"> Start position to add |             <input id="add-index" v-model="addIndex" type="checkbox" class="form-check-input"> Start position to add | ||||||
|           </label> |           </label> | ||||||
|         </div> |         </div> | ||||||
|         <small class="form-text text-muted">Add a file list to start the location to add</small> |         <small class="form-text text-muted">Add a file list to start the location to add</small> | ||||||
| @@ -186,7 +183,7 @@ | |||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <div class="form-check"> |         <div class="form-check"> | ||||||
|           <label class="form-check-label"> |           <label class="form-check-label"> | ||||||
|           <input type="checkbox" id="drop" class="form-check-input" v-model="drop"> Drop |             <input id="drop" v-model="drop" type="checkbox" class="form-check-input"> Drop | ||||||
|           </label> |           </label> | ||||||
|         </div> |         </div> | ||||||
|         <small class="form-text text-muted">Drag and drop upload</small> |         <small class="form-text text-muted">Drag and drop upload</small> | ||||||
| @@ -194,7 +191,7 @@ | |||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <div class="form-check"> |         <div class="form-check"> | ||||||
|           <label class="form-check-label"> |           <label class="form-check-label"> | ||||||
|           <input type="checkbox" id="drop-directory" class="form-check-input" v-model="dropDirectory"> Drop directory |             <input id="drop-directory" v-model="dropDirectory" type="checkbox" class="form-check-input"> Drop directory | ||||||
|           </label> |           </label> | ||||||
|         </div> |         </div> | ||||||
|         <small class="form-text text-muted">Not checked, filter the dragged folder</small> |         <small class="form-text text-muted">Not checked, filter the dragged folder</small> | ||||||
| @@ -202,7 +199,7 @@ | |||||||
|       <div class="form-group"> |       <div class="form-group"> | ||||||
|         <div class="form-check"> |         <div class="form-check"> | ||||||
|           <label class="form-check-label"> |           <label class="form-check-label"> | ||||||
|           <input type="checkbox" id="upload-auto" class="form-check-input" v-model="uploadAuto"> Auto start |             <input id="upload-auto" v-model="uploadAuto" type="checkbox" class="form-check-input"> Auto start | ||||||
|           </label> |           </label> | ||||||
|         </div> |         </div> | ||||||
|         <small class="form-text text-muted">Automatically activate upload</small> |         <small class="form-text text-muted">Automatically activate upload</small> | ||||||
| @@ -212,12 +209,8 @@ | |||||||
|       </div> |       </div> | ||||||
|     </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-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-dialog" role="document"> | ||||||
|         <div class="modal-content"> |         <div class="modal-content"> | ||||||
|           <div class="modal-header"> |           <div class="modal-header"> | ||||||
| @@ -230,17 +223,17 @@ | |||||||
|             <div class="modal-body"> |             <div class="modal-body"> | ||||||
|               <div class="form-group"> |               <div class="form-group"> | ||||||
|                 <label for="name">Name:</label> |                 <label for="name">Name:</label> | ||||||
|               <input type="text" class="form-control" required id="name"  placeholder="Please enter a file name" v-model="addData.name"> |                 <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> |                 <small class="form-text text-muted">Such as <code>filename.txt</code></small> | ||||||
|               </div> |               </div> | ||||||
|               <div class="form-group"> |               <div class="form-group"> | ||||||
|                 <label for="type">Type:</label> |                 <label for="type">Type:</label> | ||||||
|               <input type="text" class="form-control" required id="type"  placeholder="Please enter the MIME type" v-model="addData.type"> |                 <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> |                 <small class="form-text text-muted">Such as <code>text/plain</code></small> | ||||||
|               </div> |               </div> | ||||||
|               <div class="form-group"> |               <div class="form-group"> | ||||||
|                 <label for="content">Content:</label> |                 <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> |                 <textarea id="content" v-model="addData.content" class="form-control" required rows="3" placeholder="Please enter the file contents" /> | ||||||
|               </div> |               </div> | ||||||
|             </div> |             </div> | ||||||
|             <div class="modal-footer"> |             <div class="modal-footer"> | ||||||
| @@ -252,13 +245,8 @@ | |||||||
|       </div> |       </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-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-dialog modal-lg" role="document"> | ||||||
|         <div class="modal-content"> |         <div class="modal-content"> | ||||||
|           <div class="modal-header"> |           <div class="modal-header"> | ||||||
| @@ -271,22 +259,22 @@ | |||||||
|             <div class="modal-body"> |             <div class="modal-body"> | ||||||
|               <div class="form-group"> |               <div class="form-group"> | ||||||
|                 <label for="name">Name:</label> |                 <label for="name">Name:</label> | ||||||
|               <input type="text" class="form-control" required id="name"  placeholder="Please enter a file name" v-model="editFile.name"> |                 <input id="name" v-model="editFile.name" type="text" class="form-control" required placeholder="Please enter a file name"> | ||||||
|               </div> |               </div> | ||||||
|             <div class="form-group" v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'"> |               <div v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'" class="form-group"> | ||||||
|                 <label>Image: </label> |                 <label>Image: </label> | ||||||
|                 <div class="edit-image"> |                 <div class="edit-image"> | ||||||
|                 <img :src="editFile.blob" ref="editImage" /> |                   <img ref="editImage" :src="editFile.blob"> | ||||||
|                 </div> |                 </div> | ||||||
|  |  | ||||||
|                 <div class="edit-image-tool"> |                 <div class="edit-image-tool"> | ||||||
|                   <div class="btn-group" role="group"> |                   <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" 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" @click="editFile.cropper.rotate(90)"  title="cropper.rotate(90)"><i class="fa fa-repeat" aria-hidden="true"></i></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> | ||||||
|                   <div class="btn-group" role="group"> |                   <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" title="cropper.crop()" @click="editFile.cropper.crop()"><i class="fa fa-check" aria-hidden="true" /></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> |                     <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> |               </div> | ||||||
| @@ -300,10 +288,9 @@ | |||||||
|       </div> |       </div> | ||||||
|     </div> |     </div> | ||||||
|  |  | ||||||
| </div> |   </div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
| import Cropper from 'cropperjs' | import Cropper from 'cropperjs' | ||||||
| import ImageCompressor from '@xkeshi/image-compressor' | import ImageCompressor from '@xkeshi/image-compressor' | ||||||
| @@ -313,7 +300,7 @@ import { sendAnalyzeRequest } from '@/api/user' | |||||||
| // import 'bootstrap/dist/css/bootstrap.min.css' | // import 'bootstrap/dist/css/bootstrap.min.css' | ||||||
| export default { | export default { | ||||||
|   components: { |   components: { | ||||||
|     FileUpload, |     FileUpload | ||||||
|   }, |   }, | ||||||
|   data() { |   data() { | ||||||
|     return { |     return { | ||||||
| @@ -332,12 +319,12 @@ export default { | |||||||
|       thread: 3, |       thread: 3, | ||||||
|       name: 'file', |       name: 'file', | ||||||
|       postAction: '/upload/post', |       postAction: '/upload/post', | ||||||
|       putAction: 'http://localhost:8888/uploader', |       putAction: 'http://localhost:8010/uploader', | ||||||
|       headers: { |       headers: { | ||||||
|         'X-Csrf-Token': 'xxxx', |         'X-Csrf-Token': 'xxxx' | ||||||
|       }, |       }, | ||||||
|       data: { |       data: { | ||||||
|         '_csrf_token': 'xxxxxx', |         '_csrf_token': 'xxxxxx' | ||||||
|       }, |       }, | ||||||
|       autoCompress: 1024 * 1024, |       autoCompress: 1024 * 1024, | ||||||
|       uploadAuto: false, |       uploadAuto: false, | ||||||
| @@ -346,11 +333,11 @@ export default { | |||||||
|         show: false, |         show: false, | ||||||
|         name: '', |         name: '', | ||||||
|         type: '', |         type: '', | ||||||
|         content: '', |         content: '' | ||||||
|       }, |       }, | ||||||
|       editFile: { |       editFile: { | ||||||
|         show: false, |         show: false, | ||||||
|         name: '', |         name: '' | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|   }, |   }, | ||||||
| @@ -361,12 +348,12 @@ export default { | |||||||
|         this.$refs.upload.update(this.editFile.id, { error: this.editFile.error || '' }) |         this.$refs.upload.update(this.editFile.id, { error: this.editFile.error || '' }) | ||||||
|       } |       } | ||||||
|       if (newValue) { |       if (newValue) { | ||||||
|         this.$nextTick(function () { |         this.$nextTick(function() { | ||||||
|           if (!this.$refs.editImage) { |           if (!this.$refs.editImage) { | ||||||
|             return |             return | ||||||
|           } |           } | ||||||
|           let cropper = new Cropper(this.$refs.editImage, { |           const cropper = new Cropper(this.$refs.editImage, { | ||||||
|             autoCrop: false, |             autoCrop: false | ||||||
|           }) |           }) | ||||||
|           this.editFile = { |           this.editFile = { | ||||||
|             ...this.editFile, |             ...this.editFile, | ||||||
| @@ -381,7 +368,7 @@ export default { | |||||||
|         this.addData.type = '' |         this.addData.type = '' | ||||||
|         this.addData.content = '' |         this.addData.content = '' | ||||||
|       } |       } | ||||||
|     }, |     } | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     inputFilter(newFile, oldFile, prevent) { |     inputFilter(newFile, oldFile, prevent) { | ||||||
| @@ -405,7 +392,7 @@ export default { | |||||||
|           const imageCompressor = new ImageCompressor(null, { |           const imageCompressor = new ImageCompressor(null, { | ||||||
|             convertSize: Infinity, |             convertSize: Infinity, | ||||||
|             maxWidth: 512, |             maxWidth: 512, | ||||||
|             maxHeight: 512, |             maxHeight: 512 | ||||||
|           }) |           }) | ||||||
|           imageCompressor.compress(newFile.file) |           imageCompressor.compress(newFile.file) | ||||||
|             .then((file) => { |             .then((file) => { | ||||||
| @@ -420,7 +407,7 @@ export default { | |||||||
|         // Create a blob field |         // Create a blob field | ||||||
|         // 创建 blob 字段 |         // 创建 blob 字段 | ||||||
|         newFile.blob = '' |         newFile.blob = '' | ||||||
|         let URL = window.URL || window.webkitURL |         const URL = window.URL || window.webkitURL | ||||||
|         if (URL && URL.createObjectURL) { |         if (URL && URL.createObjectURL) { | ||||||
|           newFile.blob = URL.createObjectURL(newFile.file) |           newFile.blob = URL.createObjectURL(newFile.file) | ||||||
|         } |         } | ||||||
| @@ -482,12 +469,12 @@ export default { | |||||||
|         this.editFile.show = false |         this.editFile.show = false | ||||||
|         return |         return | ||||||
|       } |       } | ||||||
|       let data = { |       const data = { | ||||||
|         name: this.editFile.name, |         name: this.editFile.name | ||||||
|       } |       } | ||||||
|       if (this.editFile.cropper) { |       if (this.editFile.cropper) { | ||||||
|         let binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1]) |         const binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1]) | ||||||
|         let arr = new Uint8Array(binStr.length) |         const arr = new Uint8Array(binStr.length) | ||||||
|         for (let i = 0; i < binStr.length; i++) { |         for (let i = 0; i < binStr.length; i++) { | ||||||
|           arr[i] = binStr.charCodeAt(i) |           arr[i] = binStr.charCodeAt(i) | ||||||
|         } |         } | ||||||
| @@ -504,7 +491,7 @@ export default { | |||||||
|         this.alert('Your browser does not support') |         this.alert('Your browser does not support') | ||||||
|         return |         return | ||||||
|       } |       } | ||||||
|       let input = this.$refs.upload.$el.querySelector('input') |       const input = this.$refs.upload.$el.querySelector('input') | ||||||
|       input.directory = true |       input.directory = true | ||||||
|       input.webkitdirectory = true |       input.webkitdirectory = true | ||||||
|       this.directory = true |       this.directory = true | ||||||
| @@ -522,19 +509,22 @@ export default { | |||||||
|         this.alert('Your browser does not support') |         this.alert('Your browser does not support') | ||||||
|         return |         return | ||||||
|       } |       } | ||||||
|       let file = new window.File([this.addData.content], this.addData.name, { |       const file = new window.File([this.addData.content], this.addData.name, { | ||||||
|         type: this.addData.type, |         type: this.addData.type | ||||||
|       }) |       }) | ||||||
|       this.$refs.upload.add(file) |       this.$refs.upload.add(file) | ||||||
|     }, |     }, | ||||||
|  |  | ||||||
|     onSendAnalyzeRequest() { |     onSendAnalyzeRequest() { | ||||||
|         this.$router.push({ name: "analyze" }) |       this.$router.push({ name: 'analyze' }) | ||||||
|       this.listLoading = true |       this.listLoading = true | ||||||
|       sendAnalyzeRequest().then(response => { |       sendAnalyzeRequest().then(response => { | ||||||
|         console.log("success!") |         // console.log("success!") | ||||||
|         this.list = response.data.items |         // console.log(response['token']) | ||||||
|         this.listLoading = false |         // this.list = response.data.items | ||||||
|  |         // this.listLoading = false | ||||||
|  |         /*eslint-disable*/  | ||||||
|  |         token = response['token'] | ||||||
|         // if the response from the server indicating that it's running the analysis, then redirect to a loading view |         // 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) { |         if (this.list.indexOf('anylyzing') >= 0) { | ||||||
|           // this.$router.push('@/views/Analyzing/analyzing') |           // this.$router.push('@/views/Analyzing/analyzing') | ||||||
| @@ -550,7 +540,6 @@ export default { | |||||||
|   } |   } | ||||||
| } | } | ||||||
|  |  | ||||||
|  |  | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
| <style> | <style> | ||||||
| @@ -631,7 +620,6 @@ export default { | |||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
|  |  | ||||||
| <!-- <template> | <!-- <template> | ||||||
|   <div class="app-container"> |   <div class="app-container"> | ||||||
|     <ul> |     <ul> | ||||||
| @@ -719,11 +707,6 @@ export default { | |||||||
| import 'vue-upload-component/dist/vue-upload-component.part.css' | import 'vue-upload-component/dist/vue-upload-component.part.css' | ||||||
| @import "vue-upload-component/dist/vue-upload-component.part.css" | @import "vue-upload-component/dist/vue-upload-component.part.css" | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
|   |  | ||||||
| .file-uploads { | .file-uploads { | ||||||
|   overflow: hidden; |   overflow: hidden; | ||||||
|   position: relative; |   position: relative; | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user