Vue.js 图片上传组件使用教程 - 使用 Element UI 实现头像上传功能

<div id="app">
<span id="di">个人信息</span>
<div id="spa">基本信息</div>
<el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<script type="module">
    const instance = axios.create({
        baseURL: 'http://localhost:8080',
        timeout: 1000,
    })
<pre><code>new Vue({
    el: '#app',
    dataType: 'json',
    data: {
        imageUrl: ''
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 &lt; 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG &amp;&amp; isLt2M;
        }

    },
    created() {


    }
});
</code></pre>
</script>
</div>