github/basic
1
0
Fork 2
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 14:57:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

图片上传组件优化

Browse Source
This commit is contained in:
hooray
2021-11-02 14:37:31 +08:00
parent 1e0ebead7b
commit 2fd4eb8622
2 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ImageUpload/index.vue
+12 -12
View File
@@ -31,9 +31,9 @@
</div>
</div>
</div>
<div v-show="data.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
<el-image :src="data.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
<el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="data.progress.percent" />
<div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
<el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
<el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
</div>
</el-upload>
<div v-if="!notip" class="el-upload__tip">
@@ -41,7 +41,7 @@
<el-alert :title="`上传图片支持 ${ ext.join(' / ') } 格式，且图片大小不超过 ${ size }MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
</div>
</div>
<el-image-viewer v-if="data.imageViewerVisible" :url-list="[url]" @close="previewClose" />
<el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" @close="previewClose" />
</div>
</template>
@@ -97,7 +97,7 @@ const props = defineProps({
const emit = defineEmits(['update:url', 'on-success'])
const data = ref({
const uploadData = ref({
imageViewerVisible: false,
progress: {
preview: '',
@@ -107,11 +107,11 @@ const data = ref({
// 预览
function preview() {
data.value.imageViewerVisible = true
uploadData.value.imageViewerVisible = true
}
// 关闭预览
function previewClose() {
data.value.imageViewerVisible = false
uploadData.value.imageViewerVisible = false
}
// 移除
function remove() {
@@ -129,16 +129,16 @@ function beforeUpload(file) {
proxy.$message.error(`上传图片大小不能超过 ${props.size}MB！`)
}
if (isTypeOk && isSizeOk) {
data.value.progress.preview = URL.createObjectURL(file)
uploadData.value.progress.preview = URL.createObjectURL(file)
}
return isTypeOk && isSizeOk
}
function onProgress(file) {
data.value.progress.percent = ~~file.percent
if (data.value.progress.percent == 100) {
uploadData.value.progress.percent = ~~file.percent
if (uploadData.value.progress.percent == 100) {
setTimeout(() => {
data.value.progress.preview = ''
data.value.progress.percent = 0
uploadData.value.progress.preview = ''
uploadData.value.progress.percent = 0
}, 1000)
}
}
src/components/ImagesUpload/index.vue
+13 -13
View File
@@ -35,9 +35,9 @@
<div class="image-slot" :style="`width:${width}px;height:${height}px;`">
<i class="el-icon-plus" />
</div>
<div v-show="data.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
<el-image :src="data.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
<el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="data.progress.percent" />
<div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
<el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
<el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
</div>
</el-upload>
<div v-if="!notip" class="el-upload__tip">
@@ -45,7 +45,7 @@
<el-alert :title="`上传图片支持 ${ ext.join(' / ') } 格式，单张图片大小不超过 ${ size }MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${ max } 张`" type="info" show-icon :closable="false" />
</div>
</div>
<el-image-viewer v-if="data.imageViewerVisible" :url-list="url" :initial-index="data.dialogImageIndex" @close="previewClose" />
<el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url" :initial-index="uploadData.dialogImageIndex" @close="previewClose" />
</div>
</template>
@@ -105,7 +105,7 @@ const props = defineProps({
const emit = defineEmits(['update:url', 'on-success'])
const data = ref({
const uploadData = ref({
dialogImageIndex: 0,
imageViewerVisible: false,
progress: {
@@ -116,12 +116,12 @@ const data = ref({
// 预览
function preview(index) {
data.value.dialogImageIndex = index
data.value.imageViewerVisible = true
uploadData.value.dialogImageIndex = index
uploadData.value.imageViewerVisible = true
}
// 关闭预览
function previewClose() {
data.value.imageViewerVisible = false
uploadData.value.imageViewerVisible = false
}
// 移除
function remove(index) {
@@ -152,15 +152,15 @@ function beforeUpload(file) {
proxy.$message.error(`上传图片大小不能超过 ${props.size}MB！`)
}
if (isTypeOk && isSizeOk) {
data.value.progress.preview = URL.createObjectURL(file)
uploadData.value.progress.preview = URL.createObjectURL(file)
}
return isTypeOk && isSizeOk
}
function onProgress(file) {
data.value.progress.percent = ~~file.percent
if (data.value.progress.percent == 100) {
data.value.progress.preview = ''
data.value.progress.percent = 0
uploadData.value.progress.percent = ~~file.percent
if (uploadData.value.progress.percent == 100) {
uploadData.value.progress.preview = ''
uploadData.value.progress.percent = 0
}
}
function onSuccess(res) {