zhouhaibin
3 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