vue3封装图片上传组件的两种方式
1、使用element plus中的 el-upload实现图片上传template<div class="front upload-item"><el-upload:limit="1"action="#"list-type="picture":auto-upload="false"accept="image/png,image/gif,image/jpg,image/jpeg"
·
1、使用element plus中的 el-upload实现图片上传
template
<div class="front upload-item">
<el-upload
:limit="1"
action="#"
list-type="picture"
:auto-upload="false"
accept="image/png,image/gif,image/jpg,image/jpeg"
:on-success="handleSuccess"
:on-change="imgSaveToUrl"
:show-file-list='false'
ref='frontUpload'
>
<img class="icon-img" v-if='imageFrontUrl' :src="imageFrontUrl"/>
<img class="icon-img" v-else src="@/assets/defaultImg.png"/>
</el-upload>
script
const imageFrontUrl = ref('')
function imgSaveToUrl (file) {
imageFrontUrl.value = URL.createObjectURL(file.raw)
const fileSize = file.size
const fileType = file.raw.type
if (!fileSize) {
// 是否为空
ElMessage({
type: 'error',
showClose: true,
message: '无效的文件,请重新选择!',
})
logoPicRemove()
return
}
if (fileSize / 1024 / 1024 > 10) {
// 图片大小
ElMessage({
type: 'error',
showClose: true,
message: '请上传小于10M的图片!',
})
logoPicRemove()
return
}
if (fileType.indexOf('image') === -1) {
// 如果不是图片格式
ElMessage({
type: 'error',
showClose: true,
message: '不是有效的图片文件,或格式不支持,请重新选择!',
})
logoPicRemove()
return
}
imageUpload(file)
}
function logoPicRemove() { // 清空内容
frontUpload.value.clearFiles()
imageFrontUrl.value = ''
}
async function imageUpload (file) {
let res = await axios.post({
........
})
}
2、使用input的type="file"来实现
template
<template>
<div @click.capture.stop="handle_doUpload">
<input
type="file"
accept="image/*"
ref="getFile"
@change="handle_choseFile"
/>
</div>
</template>
script
const emit = defineEmits(['update:fileUrl'])
defineProps({
fileUrl: {
type: String,
default: ""
},
})
const getFile = ref(null)
function handle_doUpload() {
getFile.value.click()
}
async function handle_choseFile(e) {
let file = getFile.value.files[0]
if (file.size > 10 * 1024 * 1024) {
// 文件大小超限了
ElMessage.closeAll()
ElMessage({
type: 'error',
showClose: true,
message: '请上传小于10M的图片'
})
getFile.value.value = '' // 清空内容
return
}
let forms = new FormData()
forms.append('file', file)
forms.append('filePath', `pc/client-${moment().format('YYYY-MM-DD')}/`)
getFile.value.value = '' // 清空内容
let res = await axios.post({
........
})
if (res) {
emit("update:fileUrl", res.data) // 其他操作
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)