1、效果展示
2、实现代码
在components目录下，新建组件 myImgUpload.vue，代码如下：
<template>
<div>
<el-upload
:class="disabled ? 'hideAdd' : 'showAdd'"
ref="myImgUpload"
list-type="picture-card"
:multiple="limit > 1"
:disabled="disabled"
:file-list="fileList"
:accept="accept"
:limit="limit"
:on-exceed="onExceed"
:action="action"
:data="params"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-remove="onRemove"
:on-error="onError"
:on-preview="onPreview"
:with-credentials="true">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<div v-if='tip' class="tip">{{tip}}</div>
</div>
</template>
<script>
export default {
props: {
action: {
type: String,
default: `${window.baseUrl}web/upload/getAvatarUploadInfo`
},
value: {
type: String,
default: ''
},
fileList: null,
isEdit: {
type: Boolean,
default: false
},
tip: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
// 限制上传数量，默认是1张
limit: {
type: Number,
default: 1
},
// 限制上传大小，默认是5M
maxsize: {
type: Number,
default: 5
},
// 限制上传文件格式，默认是1 - 图片
// 文件类型：1：图片(.jpg/.png) ；2:so文件/txt文件上传（.so/.txt）；3：provision文件上传（.mobileprovision)
fileType: {
type: Number,
default: 1
}
},
data() {
return {
params: {
'fileType': 1,
'fileName': 'default.jpg'
},
dialogImageUrl: '',
dialogVisible: false,
accept: ''
}
},
created() {
switch (this.fileType) {
case 1:
this.accept = 'image/*'
break
default:
this.accept = '*'
}
},
methods: {
uploadAliyun(res, file) {
if (res.code === '000') {
let objectName = res.data.key
let OSS = require('ali-oss')
let client = new OSS({
region: res.data.regionId,
accessKeyId: res.data.accessKeyId,
accessKeySecret: res.data.accessKeySecret,
stsToken: res.data.securityToken,
bucket: res.data.bucket
})
const put = async() => {
try {
let result = await client.put(objectName, file.raw)
if (result.res.statusCode === 200) {
console.log('上传阿里云成功')
// this.$message.success('上传成功')
} else {
this.$message.error('上传阿里云失败')
}
} catch (e) {
this.$message.error(e)
}
}
put()
} else {
this.$message.error(res.message)
}
},
clearFiles () {
this.$refs.myImgUpload.clearFiles()
},
beforeUpload(file) {
this.params.fileName = file.name
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isRightSize = file.size / 1024 / 1024 < this.maxsize
if (!isJPG && !isPNG) {
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
}
if (!isRightSize) {
this.$message.error('上传图片大小不能超过最大限制！')
}
return (isJPG || isPNG) && isRightSize
},
onSuccess(res, file, fileList) {
this.$message.success('上传成功')
let val = ''
fileList.forEach(item => {
if (val !== '') {
val += ','
}
if (item.response) {
val += item.response.data.downloadPath
} else {
val += item.url
}
})
this.$emit('input', val)
this.uploadAliyun(res, file)
},
onPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
onExceed(files, fileList) {
this.$message({
message: '上传数量超出最大限制！',
type: 'warning'
})
},
onRemove(res, fileList) {
let val = ''
fileList.forEach(item => {
if (val !== '') {
val += ','
}
if (item.response) {
val += item.response.data.downloadPath
} else {
val += item.url
}
})
this.$emit('input', val)
},
onError(err) {
console.log('this is onError:\n', err)
}
}
}
</script>
<style lang='less' scope>
.tip {
color: #606266;
font-size: 12px;
}
.hideAdd {
.el-upload--picture-card {
display: none;
}
}
.showAdd {
.el-upload--picture-card {
display: block;
}
}
</style>
3、设计思路：
在之前的一篇文章中（【上传文件】基于阿里云的视频点播VOD、对象存储OSS实现音视频图片等文件上传），我们用了一个简单的 el-button 结合原生 input 来实现了上传文件至阿里云，但是交互上存在诸多漏洞，比方说我上传了一张图片之后只能替换无法删除；上传成功之后无法预览图片等等。所以，这次我们基于 el-upload 来更好地去实现这个上传功能，交互上也表现地更合理些。
实现的关键在于对 el-upload上传生命周期 的理解，在合适的时间上做合适的事情！比如：在合适的时间（beforeUpload）对文件格式做校验，在合适的时间（onSuccess）上传文件至阿里云OSS，在合适的时间（onSuccess/onRemove）与父组件通信（this.$emit('input', val)）。
