Skip to content

Commit

Permalink
fix a serious bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarSeventh
MarSeventh committed Sep 28, 2024
1 parent ed0a0b0 commit 8b93476
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 16 deletions.
29 changes: 16 additions & 13 deletions src/components/UploadForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</el-icon>
<div class="el-upload__text"><em>拖拽</em> <em>点击</em> 或 <em>Ctrl + V</em> 粘贴上传</div>
<template #tip>
<div class="el-upload__tip">支持多文件上传，支持图片和视频，不超过50MB</div>
<div class="el-upload__tip">支持多文件上传，支持图片和视频，不超过20MB</div>
</template>
</el-upload>
<el-card class="upload-list-card" :class="{'upload-list-busy': fileList.length}">
Expand Down Expand Up @@ -85,18 +85,18 @@
<el-text class="upload-list-item-name" truncated>{{ file.name }}</el-text>
<div class="upload-list-item-url" v-if="file.status==='done'">
<div class="upload-list-item-url-row">
<el-input v-model="file.finalURL" readonly @focus="selectAllText" :size="urlSize">
<el-input v-model="file.finalURL" readonly @click="selectAllText" :size="urlSize">
<template #prepend>URL</template>
</el-input>
<el-input v-model="file.mdURL" readonly @focus="selectAllText" :size="urlSize">
<el-input v-model="file.mdURL" readonly @click="selectAllText" :size="urlSize">
<template #prepend>MarkDown</template>
</el-input>
</div>
<div class="upload-list-item-url-row">
<el-input v-model="file.htmlURL" readonly @focus="selectAllText" :size="urlSize">
<el-input v-model="file.htmlURL" readonly @click="selectAllText" :size="urlSize">
<template #prepend>HTML</template>
</el-input>
<el-input v-model="file.ubbURL" readonly @focus="selectAllText" :size="urlSize">
<el-input v-model="file.ubbURL" readonly @click="selectAllText" :size="urlSize">
<template #prepend>BBCode</template>
</el-input>
</div>
Expand Down Expand Up @@ -202,7 +202,7 @@ computed: {
mounted() {
document.addEventListener('paste', this.handlePaste)
},
beforeDestroy() {
beforeUnmount() {
document.removeEventListener('paste', this.handlePaste)
},
methods: {
Expand Down Expand Up @@ -323,9 +323,9 @@ methods: {
},
beforeUpload(file) {
return new Promise((resolve, reject) => {
// 客户端压缩条件：1.文件类型为图片 2.开启客户端压缩，且文件大小大于压缩阈值；或文件大小大于50MB
const needCustomCompress = file.type.includes('image') && (this.customerCompress && file.size / 1024 / 1024 > this.compressBar || file.size / 1024 / 1024 > 50)
const isLt50M = file.size / 1024 / 1024 < 50
// 客户端压缩条件：1.文件类型为图片 2.开启客户端压缩，且文件大小大于压缩阈值；或文件大小大于20MB
const needCustomCompress = file.type.includes('image') && (this.customerCompress && file.size / 1024 / 1024 > this.compressBar || file.size / 1024 / 1024 > 20)
const isLt20M = file.size / 1024 / 1024 < 20
const pushFileToQueue = (file, serverCompress) => {
const fileUrl = URL.createObjectURL(file)
Expand All @@ -347,8 +347,8 @@ methods: {
if (needCustomCompress) {
//尝试压缩图片
imageConversion.compressAccurately(file, 1024 * this.compressQuality).then((res) => {
//如果压缩后大于50MB，则不上传
if (res.size / 1024 / 1024 > 50) {
//如果压缩后大于20MB，则不上传
if (res.size / 1024 / 1024 > 20) {
this.$message.error(file.name + '压缩后文件过大，无法上传!')
reject('文件过大')
}
Expand All @@ -374,7 +374,7 @@ methods: {
this.$message.error(file.name + '压缩失败，无法上传!')
reject(err)
})
} else if (isLt50M) {
} else if (isLt20M) {
this.uploading = true
const myUploadCount = this.uploadCount++
Expand Down Expand Up @@ -470,6 +470,10 @@ methods: {
}
},
handlePaste(event) {
// 当粘贴位置是文本框时，不执行该操作
if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
return
}
const items = event.clipboardData.items
for (let i = 0; i < items.length; i++) {
if (items[i].kind === 'file') {
Expand Down Expand Up @@ -587,7 +591,6 @@ methods: {
}
},
selectAllText(event) {
event.target.select();
// 复制到剪贴板
navigator.clipboard.writeText(event.target.value)
.then(() => {
Expand Down
6 changes: 3 additions & 3 deletions src/views/UploadHome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
/>
</el-form-item>
<el-form-item label="压缩阈值" v-if="customerCompress">
<el-slider v-model="compressBar" :min="1" :max="50" show-input/>
<el-slider v-model="compressBar" :min="1" :max="20" show-input/>
</el-form-item>
<el-form-item label="压缩后大小" v-if="customerCompress">
<el-slider v-model="compressQuality" :min="1" :max="compressBar" show-input/>
Expand All @@ -82,8 +82,8 @@
<br/>*Tips:
<br/>1.本设置仅针对图片文件，单位为MB
<br/>2.客户端压缩指上传前压缩，服务端压缩指Telegram端压缩
<br/>3.若图片大小>10MB，或压缩后图片大小>10MB，服务端压缩将自动失效！
<br/>4.若图片大小>50MB，将自动进行客户端压缩！
<br/>3.若图片大小>10MB，或压缩后图片大小>10MB，服务端压缩将自动失效
<br/>4.若图片大小>20MB，将自动进行客户端压缩
</p>
<div class="dialog-action">
<el-button type="primary" @click="showCompressDialog = false">确定</el-button>
Expand Down

0 comments on commit 8b93476

Please sign in to comment.