Skip to content

Commit 5e2cc40

Browse files
lian-yuelian-yue
committed
Add image width height field
1 parent dec0384 commit 5e2cc40

File tree

10 files changed

+39
-21
lines changed

10 files changed

+39
-21
lines changed

‎dist/vue-upload-component.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-upload-component.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-upload-component.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-upload-component.part.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-upload-component.ssr.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/dist/docs.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/dist/docs.js.LICENSE.txt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
/*!
1212
* Name: vue-upload-component
1313
* Component URI: https://github.com/lian-yue/vue-upload-component#readme
14-
* Version: 3.0.47
14+
* Version: 3.0.48
1515
* Author: LianYue
1616
* License: Apache-2.0
1717
* Description: Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter
@@ -26,7 +26,7 @@
2626
/*!
2727
Name: vue-upload-component
2828
Component URI: https://github.com/lian-yue/vue-upload-component#readme
29-
Version: 3.0.46
29+
Version: 3.0.47
3030
Author: LianYue
3131
License: Apache-2.0
3232
Description: Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter

‎docs/dist/docs.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/views/examples/Full.vue‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
<th>#</th>
1818
<th>Thumb</th>
1919
<th>Name</th>
20+
<th>Width</th>
21+
<th>Height</th>
2022
<th>Size</th>
2123
<th>Speed</th>
2224
<th>Status</th>
@@ -25,7 +27,7 @@
2527
</thead>
2628
<tbody>
2729
<tr v-if="!files.length">
28-
<td colspan="7">
30+
<td colspan="9">
2931
<div class="text-center p-5">
3032
<h4>Drop files anywhere to upload<br/>or</h4>
3133
<label :for="name" class="btn btn-lg btn-primary">Select Files</label>
@@ -46,6 +48,8 @@
4648
<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>
4749
</div>
4850
</td>
51+
<td>{{file.width || 0}}</td>
52+
<td>{{file.height || 0}}</td>
4953
<td>{{$formatSize(file.size)}}</td>
5054
<td>{{$formatSize(file.speed)}}</td>
5155

@@ -59,12 +63,12 @@
5963
Action
6064
</button>
6165
<div class="dropdown-menu">
62-
<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>
66+
<a :class="{'dropdown-item': true, disabled: file.active || file.success || file.error === 'compressing' || file.error === 'image parsing'}" href="#" @click.prevent="file.active || file.success || file.error === 'compressing' ? false : onEditFileShow(file)">Edit</a>
6367
<a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
6468

6569
<a class="dropdown-item" href="#" v-if="file.active" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a>
66-
<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>
67-
<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>
70+
<a class="dropdown-item" href="#" v-else-if="file.error && file.error !== 'compressing' && file.error !== 'image parsing' && $refs.upload.features.html5" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a>
71+
<a :class="{'dropdown-item': true, disabled: file.success || file.error === 'compressing' || file.error === 'image parsing'}" href="#" v-else @click.prevent="file.success || file.error === 'compressing' || file.error === 'image parsing' ? false : $refs.upload.update(file, {active: true})">Upload</a>
6872

6973
<div class="dropdown-divider"></div>
7074
<a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
@@ -454,7 +458,7 @@ export default {
454458
}
455459
456460
if (newValue) {
457-
this.$nextTick(function () {
461+
this.$nextTick( () => {
458462
if (!this.$refs.editImage) {
459463
return
460464
}
@@ -498,10 +502,10 @@ export default {
498502
499503
// Automatic compression
500504
// 自动压缩
501-
if (newFile.file && newFile.type.substr(0, 6) === 'image/' && this.autoCompress > 0 && this.autoCompress < newFile.size) {
505+
if (newFile.file && newFile.error === "" && newFile.type.substr(0, 6) === 'image/' && this.autoCompress > 0 && this.autoCompress < newFile.size) {
502506
newFile.error = 'compressing'
503507
const imageCompressor = new ImageCompressor(null, {
504-
convertSize: Infinity,
508+
convertSize: 1024 * 1024,
505509
maxWidth: 512,
506510
maxHeight: 512,
507511
})
@@ -516,13 +520,12 @@ export default {
516520
}
517521
518522
519-
if (newFile && (!oldFile || newFile.file !== oldFile.file)) {
520-
523+
if (newFile && newFile.error === "" && newFile.file && (!oldFile || newFile.file !== oldFile.file)) {
521524
// Create a blob field
522525
// 创建 blob 字段
523526
newFile.blob = ''
524-
let URL = window.URL || window.webkitURL
525-
if (URL && URL.createObjectURL) {
527+
let URL = (window.URL || window.webkitURL)
528+
if (URL) {
526529
newFile.blob = URL.createObjectURL(newFile.file)
527530
}
528531
@@ -533,6 +536,20 @@ export default {
533536
newFile.thumb = newFile.blob
534537
}
535538
}
539+
540+
// image size
541+
// image 尺寸
542+
if (newFile && newFile.error === '' && newFile.type.substr(0, 6) === "image/" && newFile.blob && (!oldFile || newFile.blob !== oldFile.blob)) {
543+
newFile.error = 'image parsing'
544+
let img = new Image();
545+
img.onload = () => {
546+
this.$refs.upload.update(newFile, {error: '', height: img.height, width: img.width})
547+
}
548+
img.οnerrοr = (e) => {
549+
this.$refs.upload.update(newFile, { error: 'parsing image size'})
550+
}
551+
img.src = newFile.blob
552+
}
536553
},
537554
538555
// add, update, remove File Event
@@ -602,6 +619,7 @@ export default {
602619
603620
let data = {
604621
name: this.editFile.name,
622+
error: '',
605623
}
606624
if (this.editFile.cropper) {
607625
let binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1])

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-upload-component",
33
"description": "Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter",
4-
"version": "3.0.47",
4+
"version": "3.0.48",
55
"author": "LianYue",
66
"scripts": {
77
"dev": "cross-env NODE_ENV=development webpack serve --hot",

0 commit comments

Comments
 (0)