@@ -29,10 +29,10 @@ The return value of function `beforeUpload` can be a Promise to check asynchrono
2929 </a-upload >
3030</template >
3131<script >
32- function getBase64 (img , callback ) {
33- const reader = new FileReader ();
34- reader .addEventListener (' load' => callback (reader .result ));
35- reader .readAsDataURL (img);
32+ function getBase64 (img , callback ) {
33+ const reader = new FileReader ()
34+ reader .addEventListener (' load' => callback (reader .result ))
35+ reader .readAsDataURL (img)
3636}
3737export default {
3838 data () {
@@ -42,38 +42,47 @@ export default {
4242 }
4343 },
4444 methods: {
45- handleChange (info ) {
45+ handleChange (info ) {
4646 if (info .file .status === ' uploading'
4747 this .loading = true
48- return ;
48+ return
4949 }
5050 if (info .file .status === ' done'
5151 // Get this url from response in real world.
5252 getBase64 (info .file .originFileObj , (imageUrl ) => {
5353 this .imageUrl = imageUrl
5454 this .loading = false
55- });
55+ })
5656 }
5757 },
58- beforeUpload (file ) {
59- const isJPG = file .type === ' image/jpeg' ;
58+ beforeUpload (file ) {
59+ const isJPG = file .type === ' image/jpeg'
6060 if (! isJPG) {
61- this .$message .error (' You can only upload JPG file!' ;
61+ this .$message .error (' You can only upload JPG file!'
6262 }
63- const isLt2M = file .size / 1024 / 1024 < 2 ;
63+ const isLt2M = file .size / 1024 / 1024 < 2
6464 if (! isLt2M) {
65- this .$message .error (' Image must smaller than 2MB!' ;
65+ this .$message .error (' Image must smaller than 2MB!'
6666 }
67- return isJPG && isLt2M;
67+ return isJPG && isLt2M
6868 },
6969 },
7070}
7171script >
72- <style scoped >
72+ <style >
7373 .avatar-uploader > .ant-upload {
7474 width 128px ;
7575 height 128px ;
7676 }
77+ .ant-upload-select-picture-card i {
78+ font-size 32px ;
79+ color #999 ;
80+ }
81+
82+ .ant-upload-select-picture-card .ant-upload-text {
83+ margin-top 8px ;
84+ color #666 ;
85+ }
7786style >
7887```
7988
0 commit comments