vue上传

            <el-table-column label="头像">
                <template slot-scope="scope">
                    <!-- <el-avatar :size="60" :src="scope.row.headerImg"> -->
                    <img :src="scope.row.headerImg" height="50px;" />
                    </el-avatar>
                </template>
            </el-table-column>

<el-form-item label="学生头像">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8090/file/upload"
                :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>
          </el-form-item>

data() {
            return {
                form: {
                    hobbyIdList: [],
                    headerImg:null
                },
                classesList: [],
                hobbyList: [],
                proviceList: [],
                cityList: [],
                areaList: [],
                imageUrl: null
            }
        },
        methods: {
            //图片上传成功回调
                        handleAvatarSuccess(res, file){
                            console.log(res,file)
                            //图片显示
                            this.imageUrl = res.imgUrl;
                            //保存图片，给form.headerImg赋值
                            this.form.headerImg=res.imgUrl;
                        },
                        //图片上传之前，是调后台接口之前
                        beforeAvatarUpload(file){
                            const isJPG = file.type === 'image/jpeg';
                            const isLt2M = file.size / 1024 / 1024 < 2;
                    
                            if (!isJPG) {
                              this.$message.error('上传头像图片只能是 JPG 格式!');
                            }
                            if (!isLt2M) {
                              this.$message.error('上传头像图片大小不能超过 2MB!');
                            }
                            console.log(11111111)
                            return isJPG && isLt2M;
                        },
            onSubmit() {
                console.log(this.form);
                this.axios.post("http://localhost:8090/student/save", this.form).then(res => {
                    console.log(res);
                    //如果成功跳转到列表
                    this.$router.push("/student")
                })


            },