🌐 AI搜索 & 代理 主页
Skip to content

Commit d4a85ca

Browse files
lian-yuelian-yue
committed
update docs, add automatic compression
1 parent be060d2 commit d4a85ca

File tree

3 files changed

+61
-20
lines changed

3 files changed

+61
-20
lines changed

‎docs/docs/en.md‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -618,9 +618,12 @@ Add, update, remove pre-filter
618618
If the `oldFile` value is `undefined` 'is added
619619
If `newFile`, `oldFile` is exist, it is updated
620620

621+
> Synchronization modify `newFile`
622+
> Asynchronous Please use `update`,` add`, `remove`,` clear` method
623+
> Asynchronous Please set an error first to prevent being uploaded
621624
622-
> You can not use `update`,` add`, `remove`,` clear` methods in the event
623-
>The `newFile` object can be modified within the event
625+
> Synchronization can not use `update`,` add`, `remove`,` clear` methods
626+
> Asynchronous can not modify `newFile`
624627
625628
* **Usage:**
626629
```html
@@ -717,11 +720,6 @@ Add, update, remove after
717720
inputFile(newFile, oldFile) {
718721
if (newFile && !oldFile) {
719722
// Add file
720-
721-
// Automatic upload
722-
if (!this.$refs.upload.active) {
723-
this.$refs.upload.active = true
724-
}
725723
}
726724
727725
if (newFile && oldFile) {
@@ -764,6 +762,13 @@ Add, update, remove after
764762
// });
765763
}
766764
}
765+
766+
// Automatic upload
767+
if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
768+
if (!this.$refs.upload.active) {
769+
this.$refs.upload.active = true
770+
}
771+
}
767772
}
768773
}
769774
}

‎docs/docs/zh-cn.md‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -612,8 +612,13 @@ Add, update, remove pre-filter
612612
如果 `oldFile` 值为 `undefined` 则是添加
613613
如果 `newFile`, `oldFile` 都存在则是更新
614614

615-
> 事件内不可使用 `update`, `add`, `remove`, `clear` 方法
616-
事件内可修改 `newFile` 对象
615+
> 事件内同步处理请直接修改 `newFile`
616+
> 事件内异步处理请使用 `update`, `add`, `remove`, `clear` 方法
617+
> 异步请先设置一个错误以防止被上传
618+
619+
> 同步不能使用 `update`, `add`, `remove`, `clear` 方法
620+
> 异步不能修改 `newFile`
621+
617622

618623
* **示例:**
619624
```html
@@ -709,11 +714,6 @@ Add, update, remove pre-filter
709714
inputFile(newFile, oldFile) {
710715
if (newFile && !oldFile) {
711716
// 添加文件
712-
713-
// 自动上传
714-
if (!this.$refs.upload.active) {
715-
this.$refs.upload.active = true
716-
}
717717
}
718718
719719
if (newFile && oldFile) {
@@ -756,6 +756,13 @@ Add, update, remove pre-filter
756756
// });
757757
}
758758
}
759+
760+
// 自动上传
761+
if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
762+
if (!this.$refs.upload.active) {
763+
this.$refs.upload.active = true
764+
}
765+
}
759766
}
760767
}
761768
}

‎docs/views/examples/Full.vue‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,12 @@
5959
Action
6060
</button>
6161
<div class="dropdown-menu">
62-
<a :class="{'dropdown-item': true, disabled: file.active || file.success}" href="#" @click.prevent="file.active || file.success ? false : onEditFileShow(file)">Edit</a>
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>
6363
<a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
6464

6565
<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 && $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}" href="#" v-else @click.prevent="file.success ? false : $refs.upload.update(file, {active: true})">Upload</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>
6868

6969
<div class="dropdown-divider"></div>
7070
<a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
@@ -164,6 +164,13 @@
164164
<label for="minSize">Min size:</label>
165165
<input type="number" min="0" id="minSize" class="form-control" v-model.number="minSize">
166166
</div>
167+
<div class="form-group">
168+
<label for="autoCompress">Automatically compress:</label>
169+
<input type="number" min="0" id="autoCompress" class="form-control" v-model.number="autoCompress">
170+
<small class="form-text text-muted" v-if="autoCompress > 0">More than {{autoCompress | formatSize}} files are automatically compressed</small>
171+
<small class="form-text text-muted" v-else>Set up automatic compression</small>
172+
</div>
173+
167174
<div class="form-group">
168175
<div class="form-check">
169176
<label class="form-check-label">
@@ -172,6 +179,7 @@
172179
</div>
173180
<small class="form-text text-muted">Add a file list to start the location to add</small>
174181
</div>
182+
175183
<div class="form-group">
176184
<div class="form-check">
177185
<label class="form-check-label">
@@ -374,6 +382,7 @@
374382

375383
<script>
376384
import Cropper from 'cropperjs'
385+
import ImageCompressor from '@xkeshi/image-compressor'
377386
import FileUpload from 'vue-upload-component'
378387
export default {
379388
components: {
@@ -405,7 +414,7 @@ export default {
405414
'_csrf_token': 'xxxxxx',
406415
},
407416
408-
417+
autoCompress: 1024 * 1024,
409418
uploadAuto: false,
410419
isOption: false,
411420
@@ -473,6 +482,24 @@ export default {
473482
if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
474483
return prevent()
475484
}
485+
486+
// Automatic compression
487+
// 自动压缩
488+
if (newFile.file && newFile.type.substr(0, 6) === 'image/' && this.autoCompress > 0 && this.autoCompress < newFile.size) {
489+
newFile.error = 'compressing'
490+
const imageCompressor = new ImageCompressor(null, {
491+
convertSize: Infinity,
492+
maxWidth: 512,
493+
maxHeight: 512,
494+
})
495+
imageCompressor.compress(newFile.file)
496+
.then((file) => {
497+
this.$refs.upload.update(newFile, { error: '', file, size: file.size, type: file.type })
498+
})
499+
.catch((err) => {
500+
this.$refs.upload.update(newFile, { error: err.message || 'compress' })
501+
})
502+
}
476503
}
477504
478505
@@ -535,8 +562,10 @@ export default {
535562
536563
537564
// Automatically activate upload
538-
if (newFile && !oldFile && this.uploadAuto && !this.$refs.upload.active) {
539-
this.$refs.upload.active = true
565+
if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
566+
if (this.uploadAuto && !this.$refs.upload.active) {
567+
this.$refs.upload.active = true
568+
}
540569
}
541570
},
542571

0 commit comments

Comments
 (0)