vue上传 

1             <el-table-column label="头像">
2                 <template slot-scope="scope">
3                     <!-- <el-avatar :size="60" :src="scope.row.headerImg"> -->
4                     <img :src="scope.row.headerImg" height="50px;" />
5                     </el-avatar>
6                 </template>
7             </el-table-column>
 1 <el-form-item label="学生头像">
 2               <el-upload
 3                 class="avatar-uploader"
 4                 action="http://localhost:8090/file/upload"
 5                 :show-file-list="false"
 6                 :on-success="handleAvatarSuccess"
 7                 :before-upload="beforeAvatarUpload">
 8                 <img v-if="imageUrl" :src="imageUrl" class="avatar">
 9                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
10               </el-upload>
11           </el-form-item>
 1 data() {
 2             return {
 3                 form: {
 4                     hobbyIdList: [],
 5                     headerImg:null
 6                 },
 7                 classesList: [],
 8                 hobbyList: [],
 9                 proviceList: [],
10                 cityList: [],
11                 areaList: [],
12                 imageUrl: null
13             }
14         },
15         methods: {
16             //图片上传成功回调
17                         handleAvatarSuccess(res, file){
18                             console.log(res,file)
19                             //图片显示
20                             this.imageUrl = res.imgUrl;
21                             //保存图片，给form.headerImg赋值
22                             this.form.headerImg=res.imgUrl;
23                         },
24                         //图片上传之前，是调后台接口之前
25                         beforeAvatarUpload(file){
26                             const isJPG = file.type === 'image/jpeg';
27                             const isLt2M = file.size / 1024 / 1024 < 2;
28                     
29                             if (!isJPG) {
30                               this.$message.error('上传头像图片只能是 JPG 格式!');
31                             }
32                             if (!isLt2M) {
33                               this.$message.error('上传头像图片大小不能超过 2MB!');
34                             }
35                             console.log(11111111)
36                             return isJPG && isLt2M;
37                         },
38             onSubmit() {
39                 console.log(this.form);
40                 this.axios.post("http://localhost:8090/student/save", this.form).then(res => {
41                     console.log(res);
42                     //如果成功跳转到列表
43                     this.$router.push("/student")
44                 })
45 
46 
47             },

 

posted @ 2020-06-09 20:20  Tangjt  阅读(130)  评论(0)    收藏  举报