81 lines
1.9 KiB
Markdown
81 lines
1.9 KiB
Markdown
|
<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"
|
||
|
|
>
|
||
|
|
<img v-if="imageUrl" :src="imageUrl" alt="" />
|
||
|
|
<div v-else>
|
||
|
|
<a-icon :type="loading ? 'loading' : 'plus'" />
|
||
|
|
<div class="ant-upload-text">Upload</div>
|
||
|
|
</div>
|
||
|
|
</a-upload>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
function getBase64(img, callback) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.addEventListener('load', () => callback(reader.result));
|
||
|
|
reader.readAsDataURL(img);
|
||
|
|
}
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
loading: false,
|
||
|
|
imageUrl: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
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
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeUpload(file) {
|
||
|
|
const isJPG = file.type === 'image/jpeg';
|
||
|
|
if (!isJPG) {
|
||
|
|
this.$message.error('You can only upload JPG file!');
|
||
|
|
}
|
||
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
|
|
if (!isLt2M) {
|
||
|
|
this.$message.error('Image must smaller than 2MB!');
|
||
|
|
}
|
||
|
|
return isJPG && isLt2M;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.avatar-uploader > .ant-upload {
|
||
|
|
width: 128px;
|
||
|
|
height: 128px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
|