zhouhaibin
5 months ago
7 changed files with 244 additions and 55 deletions
@ -0,0 +1,106 @@ |
|||||
|
<template> |
||||
|
<el-upload |
||||
|
v-model:file-list="fileList" |
||||
|
class="upload-demo" |
||||
|
action |
||||
|
:on-preview="handlePreview" |
||||
|
:on-remove="handleRemove" |
||||
|
list-type="picture" |
||||
|
:limit="1" |
||||
|
:http-request="ImgUploadSectionFile" |
||||
|
:before-upload="beforeAvatarUpload" |
||||
|
:on-change="handleEditChange" |
||||
|
:on-exceed="handleExceed" |
||||
|
accept=".png, .jpg" |
||||
|
> |
||||
|
<el-button type="primary">上传图片</el-button> |
||||
|
<template #tip> |
||||
|
<div class="el-upload__tip">支持 jpg/png 最大尺寸为10Mb</div> |
||||
|
</template> |
||||
|
</el-upload> |
||||
|
<el-dialog v-model="dialogVisible"> |
||||
|
<img w-full :src="dialogImageUrl" alt="Preview Image" /> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref,defineEmits,defineProps} from 'vue' |
||||
|
import { ElMessage } from 'element-plus' |
||||
|
|
||||
|
import type { UploadProps, UploadUserFile } from 'element-plus' |
||||
|
const propsData= defineProps(["modelValue","moduleParam"]) |
||||
|
const emits= defineEmits(['update:modelValue']) |
||||
|
const fileList = ref<UploadUserFile[]>([]) |
||||
|
let dialogVisible = ref(false) |
||||
|
let dialogImageUrl = ref() |
||||
|
|
||||
|
if(propsData.modelValue){ |
||||
|
fileList.value.push({url:propsData.modelValue,name:propsData.modelValue.split('/')[propsData.modelValue.split('/').length-1]}) |
||||
|
console.log(fileList.value) |
||||
|
} |
||||
|
// const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { |
||||
|
// console.log(uploadFile, uploadFiles) |
||||
|
// } |
||||
|
|
||||
|
const handlePreview: UploadProps['onPreview'] = (file) => { |
||||
|
console.log(file) |
||||
|
dialogImageUrl.value = file.url |
||||
|
dialogVisible.value = true |
||||
|
} |
||||
|
|
||||
|
// 删除图片 |
||||
|
function handleRemove(file, fileList) { |
||||
|
if (fileList.length === 0) { |
||||
|
fileList = [] |
||||
|
} else { |
||||
|
let dl = fileList.indexOf(file) |
||||
|
fileList.splice(dl, 1) |
||||
|
} |
||||
|
console.log('remove', file, fileList) |
||||
|
// hideUploadEdit = fileList.length >= limitNum |
||||
|
} |
||||
|
|
||||
|
// on-change添加文件，上传成功和上传失败时都会被调用 |
||||
|
function handleEditChange(file, fileList) { |
||||
|
console.log('file:', file, fileList) |
||||
|
// hideUploadEdit = fileList.length >= limitNum |
||||
|
// console.log("this.fileList:", this.fileList); |
||||
|
// console.log("this.hideUploadEdit:", this.hideUploadEdit); |
||||
|
} |
||||
|
// http-request自定义上传 |
||||
|
function ImgUploadSectionFile(param) { |
||||
|
console.log('param', param) |
||||
|
emits("update:modelValue",param.file) |
||||
|
} |
||||
|
|
||||
|
// before-upload上传文件之前的钩子，参数为上传的文件 |
||||
|
// 若返回 false 或者返回 Promise 且被 reject，则停止上传 |
||||
|
function beforeAvatarUpload(file) { |
||||
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' |
||||
|
const isLt2M = file.size / 1024 / 1024 < 10 |
||||
|
if (!isJPG) { |
||||
|
ElMessage.error('上传图片只能是 JPG 或 PNG 格式!') |
||||
|
} |
||||
|
if (!isLt2M) { |
||||
|
ElMessage.error('上传图片大小不能超过 10MB!') |
||||
|
} |
||||
|
return isJPG && isLt2M |
||||
|
} |
||||
|
function handleExceed() { |
||||
|
ElMessage.warning('最多只能上传一个文件') |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<!-- :limit="limitNum" //最大允许上传个数 |
||||
|
:class="{hide:hideUploadEdit}" //加类名为了隐藏上传样式 |
||||
|
:on-remove="handleRemove" //文件列表移除文件时的钩子 |
||||
|
:on-change="handleEditChange" //文件状态改变时的钩子(可以限制文件数量和文件大小) |
||||
|
:http-request="ImgUploadSectionFile" //覆盖默认的上传行为，实现手动上传 |
||||
|
:before-upload="beforeAvatarUpload" //上传文件之前的钩子 |
||||
|
:with-credentials="true" //支持发送 cookie 凭证信息 |
||||
|
:auto-upload="true" //是否在选取文件后立即进行上传(不知什么原因false没效果) |
||||
|
accept=".png, .jpg" //接受上传的文件类型 |
||||
|
action="" //手动上传不需要填写url |
||||
|
list-type="picture-card" //设置文件列表的样式 |
||||
|
:file-list="fileList" //上传的文件列表 |
||||
|
--> |
||||
Loading…
Reference in new issue