基于el-upload二次封裝，真正的開箱即用！
前言
相信el-upload組件各位小伙伴都不陌生了，工作中我們也經(jīng)常使用它。然而，這個組件往往并不能夠滿足我們所有的需求，為此我特定對此二次封裝。小伙伴們可以直接copy如下代碼。
template
<template>
<div>
<el-upload
:disabled="idCardIsUpload"
class="avatar-uploader"
list-type="picture"
:show-file-list="false"
:http-request="diyRequest"
>
<el-image v-if="idCardImgUrl"
:src="idCardImgUrl"
name="idCardImgUrl"
class="avatar"
@error="imgLoadError"
></el-image>
<el-progress style="margin: 5px;" :width='70' v-else-if="idCardIsUpload" type="circle" :percentage="idCardUploadPercentage">
</el-progress>
<div v-else class="div-plus">
<i class="el-icon-plus avatar-uploader-icon">
</i>
</div>
</el-upload>
</div>
</template>
script
<script>
export default {
data() {
return {
idCardImgUrl: '',
idCardIsUpload: false,
idCardUploadPercentage: 0,
errorImgUrls: [],
}
},
props: {
/*可以在使用組件的時候傳入一個支持上傳的圖片格式的數(shù)組進來，不傳默認(rèn)default數(shù)組*/
supportType: {//支持上傳文件的格式
default: () => ['image/jpeg', 'image/jpg', 'image/png'],
type: Array
}
},
methods: {
/*父組件執(zhí)行的方法*/
setEditImg(path) {
this.idCardImgUrl = path ? path : ''
},
/*自定義上傳的方法*/
diyRequest(param) {
/*對上傳圖片的大小和格式校驗*/
const isLt10M = param.file.size / 1024 / 1024 < 4
if (this.supportType.indexOf(param.file.type) == -1) {
let supportType = this.supportType
let msg = ''
supportType.map(res => {
msg += res.substring(6) + '/'
})
let newMsg = msg.slice(0, (msg.length) - 1)
this.$Message('error', `請上傳正確的圖片格式！支持的格式有：` + newMsg)
return
}
if (!isLt10M) {
this.$Message('error', '上傳圖片大小不能超過4MB哦!')
return
}
const fileObj = param.file
const form = new FormData()
form.append('file', fileObj)
let callback = (progress) => {
this.idCardIsUpload = true
this.idCardUploadPercentage = progress
}
/*走后臺接口，這里自行換成自己的api*/
this.$api.addUploadImg(form, callback).then(res => {
this.idCardIsUpload = false
this.idCardUploadPercentage = 0
if (res.code == 200) {
this.idCardImgUrl = res.data.basePath + res.data.url
/*成功之后將圖片路徑暴露給父組件去顯示圖片*/
this.$emit('setCardPic', res.data.url)
} else {
this.$Message('error', res.message)
}
})
},
/*當(dāng)圖片顯示失敗的時候，我會重復(fù)10次賦值圖片，成功顯示就退出，還是失敗就會顯示失敗*/
imgLoadError(error) {
let isExist = false
const src = error.path[0].src.split('?')[0]
if (this.errorImgUrls.length == 0) {
this.errorImgUrls.push({ 'src': src, 'number': 1 })
}
for (let i = 0; i < this.errorImgUrls.length; i++) {
if (src === this.errorImgUrls[i].src) {
isExist = true
while (this.errorImgUrls[i].number < 10) {
console.log('我在重復(fù)賦值...')
this.errorImgUrls[i].number++
const timestamp1 = Date.parse(new Date())
this[error.path[0].name] = src + '?t=' + timestamp1
}
}
}
if (!isExist) {//首次上傳（不在錯誤數(shù)組圖片中，需要執(zhí)行循環(huán)三次賦值）
this.errorImgUrls.push({ 'src': src, 'number': 1 })
this.imgLoadError(error)
}
},
}
}
可以看到我這里用的是http-request="diyRequest"自定義上傳,用自定義上傳的方式比較靈活，比如上傳前文件的格式、大小校驗，上傳后的服務(wù)器圖片資源未同步的處理等等。
style
<style lang="scss" scoped>
.div-plus {
width: 174px;
height: 174px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<style lang="scss">
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
text-align: center;
}
.avatar {
width: 120px;
height: 120px;
display: block;
}
</style>
使用
/*導(dǎo)入組件*/
import uploadImg from '@/components/uploadImg'
/*組件注冊*/
export default {
components: { uploadImg },
data(){
imgpath: '',
},
methods:{
/*執(zhí)行uploadImg組件報出來的事件，path就是顯示圖片的路徑*/
setCardPic(path, pic) {
this.form[pic] = path
},
/*詳情的時候設(shè)定顯示圖片的路徑 setEditImg是uploadImg組件提供的方法 imgpath是子組件的ref屬性（看使用的組件）*/
this.$refs.imgpath.setEditImg('')
}
}
<template>
<el-form-item label="廣告圖片:" prop="imgpath">
<uploadImg @setCardPic="setCardPic($event,'imgpath')" ref="imgpath"></uploadImg>
<span style="font-size: 12px;color: #606266;">只能上傳jpg/png/jpeg文件，且不超過4MB</span>
</el-form-item>
</template>
看看效果：
上傳圖片后：
設(shè)計非常的仁杏
，直接替換自己的后端接口就完事了。開箱即用！
推薦閱讀
評論
圖片
表情