基于ant-design of vue 的自定义图片上传
html
<a-upload
name="file"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:before-upload="beforeUpload"
:customRequest="selfUpload"
@change="handleChange"
>
<img style="width:180px" v-if="imageUrl" :src="imageUrl" />
<div v-else>
<a-icon type="plus" />
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
script
function getBase64(img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
}
export default{
data(){
url:'...',
imageUrl:''
},
methods{
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
if (!isJpgOrPng) {
this.$message.error('请上传jpeg或png格式的图片!')
}
const isLt2M = file.size / 1024 / 1024 < 5
if (!isLt2M) {
this.$message.error('图片大小不能小于5兆!')
}
return isJpgOrPng && isLt2M
},
selfUpload({ action, file, onSuccess, onError, onProgress }) {
const formData = new FormData()
let that = this
formData.append('file', file)
// console.log(formData, 'formData')
axios({
url: this.url,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
processData: false,
data: formData
}).then(res => {
if (res.status === 200) {
that.imageUrl = res.data.url
}else{
this.$message.error(res.data.msg)
}
})
},
handleChange(info) {
if (info.file.status === 'uploading') {
this.loading = true
return
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
this.imageUrl = imageUrl
this.loading = false
})
}
},
}
}
css
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}