ant-design-vue/components/upload/demo/avatar.md

90 lines
2.1 KiB
Markdown
Raw Normal View History

2018-04-13 16:19:50 +08:00
<cn>
#### 用户头像
点击上传用户头像,并使用 `beforeUpload` 限制用户上传的图片格式和大小。
`beforeUpload` 的返回值可以是一个 Promise 以支持也支持异步检查
</cn>
<us>
#### Avatar
Click to upload user's avatar, and validate size and format of picture with `beforeUpload`.
The return value of function `beforeUpload` can be a Promise to check asynchronously.
</us>
```html
<template>
<a-upload
name="avatar"
listType="picture-card"
class="avatar-uploader"
:showUploadList="false"
action="//jsonplaceholder.typicode.com/posts/"
:beforeUpload="beforeUpload"
@change="handleChange"
>
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
2018-04-13 16:19:50 +08:00
<div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
</template>
<script>
2018-07-03 10:22:03 +08:00
function getBase64 (img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
2018-04-13 16:19:50 +08:00
}
export default {
data () {
return {
loading: false,
imageUrl: '',
}
},
methods: {
2018-07-03 10:22:03 +08:00
handleChange (info) {
2018-04-13 16:19:50 +08:00
if (info.file.status === 'uploading') {
this.loading = true
2018-07-03 10:22:03 +08:00
return
2018-04-13 16:19:50 +08:00
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, (imageUrl) => {
this.imageUrl = imageUrl
this.loading = false
2018-07-03 10:22:03 +08:00
})
2018-04-13 16:19:50 +08:00
}
},
2018-07-03 10:22:03 +08:00
beforeUpload (file) {
const isJPG = file.type === 'image/jpeg'
2018-04-13 16:19:50 +08:00
if (!isJPG) {
2018-07-03 10:22:03 +08:00
this.$message.error('You can only upload JPG file!')
2018-04-13 16:19:50 +08:00
}
2018-07-03 10:22:03 +08:00
const isLt2M = file.size / 1024 / 1024 < 2
2018-04-13 16:19:50 +08:00
if (!isLt2M) {
2018-07-03 10:22:03 +08:00
this.$message.error('Image must smaller than 2MB!')
2018-04-13 16:19:50 +08:00
}
2018-07-03 10:22:03 +08:00
return isJPG && isLt2M
2018-04-13 16:19:50 +08:00
},
},
}
</script>
2018-07-03 10:22:03 +08:00
<style>
2018-04-13 16:19:50 +08:00
.avatar-uploader > .ant-upload {
width: 128px;
height: 128px;
}
2018-07-03 10:22:03 +08:00
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
2018-04-13 16:19:50 +08:00
</style>
```