Vue上传头像功能

用elementUI中的el-upload组件，v-model双向绑定

<el-form-item label="封面图" prop="storeImg" >
          <el-input v-model="settingInfo.storeImg" placeholder="" v-show="false"></el-input>
            <el-upload
                    class="avatar-uploader1"
                    action="/hotmenu/hoteats/image/uploadFood"
                    accept=".png,.jpg,.jpeg"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :headers="headers">
                <img width="50" height="50" v-if="settingInfo.storeImg" :src="imageUrl"  class="avatar1">
        		<i v-else class="el-icon-plus1 avatar-uploader-icon1"></i>
             </el-upload>
 </el-form-item>

2. 绑定方法 

// 图片上传成功
    handleAvatarSuccess(res, file) {
        	console.log(file);
            if (res.code == 200) {
                this.$message({
                    type: 'success',
                    message: '上传成功!'
                });
                this.settingInfo.storeImg = res.data;
                console.log(res.data);
        		//this.imageUrl=this.http+this.bDInfo.imageName;
            this.imageUrl=res.data;
            this.imageUrl = URL.createObjectURL(file.raw);
        		//this.$forceUpdate();
            } else {
                this.$message.error(res.message)
            }
      },

3.声明数据

//表单数据
      settingInfo: {

        storeImg:""
      },

注意：表单验证不要忘记，该绑定的事件数据不要忘记绑定