element组件图片上传

实现功能：上传、修改并将头像保存在页面上

1.action：必选参数，上传的地址（就是用post发送请求的地址）；
2.data：上传时附带的额外参数，数据类型是object，可以用来传替token值；
3.name：上传的文件字段名，数据类型是 string，默认值是file（后端接受图片文件要用file这个字段名！！！！）**可以修改，在 el-upload标签中写入name=“其他字段名”。
4.显示头像：img标签中v-if要恒等于true，等于imgurl的话，只有上传图片，有图片地址时img标签才显示，否则img标签元素会隐藏。

HTML代码

            <el-upload
                    class="avatar-uploader"
                    :action="上传图片给谁"
                    :show-file-list="false"
                    :data="{auth_code:token}"//附带参数
                    :on-success="handleAvatarSuccess"//上传成功后，自动执行
                    :before-upload="beforeAvatarUpload">//上传前自动执行，做图片验证
                <img v-if="true" :src="imageUrl" class="avatar" id="phone">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="upload_span" v-if="!imageUrl">支持大小不超过2M的JPG,GIF,PNG图片上传</span>

js代码

 {
     created() {
            this.token = localStorage.getItem('auth_code');给后台的token值
            this.imageUrl = localStorage.getItem('imageUrl');将地址从本地数据库中拿出。
        },
        methods: {
            //上传成功后，会自动执行。res是后端返回的数据
            handleAvatarSuccess(res) {
                // this.imageUrl = URL.createObjectURL(file.raw);
                this.imageUrl = res.payload[0].image;
                localStorage.setItem('imageUrl', this.imageUrl);  //将地址存入本地数据库中。
                在实际开发中，是在请求页面数据时，头像数据也会请求回来，
                这时将数据再传替给头像的src，才能实现刷新后头像仍然存在页面上。
                所以饿了么上传头像组件，只能实现头像上传。上传成功后，
                还需要在created或者mounted里面发送请求才能实现页面刷新后头像仍然存在。
            }