vue集合springboot

图片处理的后台
@RestController
public class UpdateImgController {

@RequestMapping("/upload")
public ResultEntity upload(MultipartFile file){

    try{

        if(file!=null && !file.isEmpty()){
            //上传的了路径
            String path = "D:\\pic\\";
            //重新命名文件名称
            String fileName = UUID.randomUUID() + "_"+ file.getOriginalFilename();
            //创建文件对象
            File destFile = new File(path,fileName);
            //当前文件进行拷贝
            file.transferTo(destFile);
            //返回图片路径地址
            return ResultEntity.ok("http://localhost:81/img/"+fileName);

        }

    } catch (IOException e) {
        e.printStackTrace();
    }
        return ResultEntity.error("upload");

}

}
后端的mapper.xml处理

<?xml version="1.0" encoding="UTF-8"?>

<!-- 通用查询映射结果 -->
<resultMap id="BaseResultMap" type="com.ys.kylintable.entity.User">
    <id column="id" property="id" />
    <result column="name" property="name" />
    <result column="phone" property="phone" />
    <result column="telephone" property="telephone" />
    <result column="address" property="address" />
    <result column="enabled" property="enabled" />
    <result column="username" property="username" />
    <result column="password" property="password" />
    <result column="userface" property="userface" />
    <result column="remark" property="remark" />
    <result column="sex" property="sex" />
    <result column="province" property="province" />
    <result column="city" property="city" />
    <result column="district" property="district" />
</resultMap>

<!-- 通用查询结果列 -->
<sql id="Base_Column_List">
    id, name, phone, telephone, address, enabled, username, password, userface, remark, sex, province, city, district
</sql>
<resultMap id="mapvo" type="com.ys.kylintable.entity.UserVo" extends="BaseResultMap">

    <result column="rids" property="rids" />
    <result column="nameZh" property="nameZh" />
    <result column="provinceName" property="provinceName" />
    <result column="cityName" property="cityName" />
    <result column="districtName" property="districtName" />
</resultMap>
<select id="selectPageVo" resultMap="mapvo">
    SELECT
u.*, GROUP_CONCAT(r.id) rids,
GROUP_CONCAT(r.nameZh) nameZh,
p.province provinceName,
c.city cityName,
d.district districtName

FROM
USER u
LEFT JOIN user_role ur ON u.id = ur.uid
LEFT JOIN role r ON ur.rid = r.id
LEFT JOIN nation p ON u.province = p.id
LEFT JOIN nation c ON u.city = c.id
LEFT JOIN nation d ON u.district = d.id



and u.username like concat(’%’,#{vo.username},’%’)


and u.phone like concat(’%’,#{vo.phone},’%’)



GROUP BY
u.id

</select>

				<el-form-item label="性别">
					<el-select v-model="searchFormModel.sex" placeholder="请选择性别">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="success" icon="el-icon-search" @click="searchUser">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<el-col :span="8">
			<el-button type="primary" icon="el-icon-search" @click="openInsertDialog">用户添加</el-button>
			<el-button type="danger" icon="el-icon-search" @click="deleteUser">批量删除</el-button>
		</el-col>
	</el-row>
	<el-table :data="tableData" @selection-change="handleSelectionChange">

		<!--全选配置-->
		<el-table-column type="selection"></el-table-column>

		<el-table-column label="序号" prop="id"></el-table-column>
		<!--用户头像-->
		<el-table-column label="头像">
			<template slot-scope="scope">
				<el-avatar :src="scope.row.userface"></el-avatar>
				<!-- <img :src="scope.row.userface"  width="60px" height="60px"/>-->
			</template>
		</el-table-column>
		<!--登录名称-->
		<el-table-column label="登录名" prop="username"></el-table-column>
		<!--性别-->
		<el-table-column label="性别">
			<template slot-scope="scope">
				<span v-if="scope.row.sex==1">男</span>
				<span v-if="scope.row.sex==0">女</span>
			</template>
		</el-table-column>
		<!--电话号码-->
		<el-table-column label="手机号">
			<template slot-scope="scope">
				<i class="el-icon-phone"></i>
				<span style="margin-left: 10px;">{{scope.row.phone}}</span>
			</template>
		</el-table-column>

		<!--角色-->
		<el-table-column label="拥有角色" prop="nameZhs"></el-table-column>

		<!--省-->
		<el-table-column label="省市区" width="150">
			<!--作用域-->
			<template slot-scope="scope">
				{{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.districtName}}
			</template>
		</el-table-column>
		<!--市
		<el-table-column label="市" prop="cityName"></el-table-column>
		-->
		<!--区
		<el-table-column label="区" prop="districtName"></el-table-column>
		-->

		<el-table-column label="操作" width="300">
			<template slot-scope="scope">
				<el-button type="warning" @click="openRoleDialog(scope.row)" size="small">授权</el-button>
				<el-button type="success" size="small" @click="openEditDialog(scope.row)">修改</el-button>
				<el-button type="primary" size="small">详情</el-button>
				<el-button type="danger" size="small" @click="deleteUserOne(scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-row>
		<el-col :span="24">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :total="total"
			 :page-size="size" :page-sizes="sizes" :current-page="current" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
		</el-col>
	</el-row>



	<!--添加用户的对话框开始-->
	<el-dialog :visible.sync="insertUserDialog" title="添加用户" width="60%" center>

		<el-form :model="insertFormModel" :rules="insertRules" ref="insertRuleForm" label-width="80px">

			<el-form-item label="登录名称" prop="username">
				<el-input v-model="insertFormModel.username" placeholder="请输入登录名称"></el-input>
			</el-form-item>

			<el-form-item label="手机号" prop="phone">
				<el-input v-model="insertFormModel.phone" placeholder="请输入手机号"></el-input>
			</el-form-item>

			<el-form-item label="性别">
				<!--label就是value值-->
				<el-radio v-model="insertFormModel.sex" label="1" border>男</el-radio>
				<el-radio v-model="insertFormModel.sex" label="0" border>女</el-radio>
			</el-form-item>

			<el-form-item label="角色">
				<el-checkbox-group v-model="checkedRoles" @change="handleCheckedRolesChange">
					<!--遍历角色{{role.nameZh}}名称    ：label是value值-->
					<el-checkbox v-for="role in roles" :label="role.id">{{role.nameZh}}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
	

			<el-form-item label="省市区">
				<el-cascader v-model="value" :options="nations" :props="props" @change="handleChange"></el-cascader>
			</el-form-item>

			<el-form-item label="头像">
				<!--action 上传的地址  name的名称默认是file 就是上传到控制层的参数名称-->
				<!--on-success 成功/before-uploud 上传前处理是上传组件的钩子函数-->
				<el-upload name="file" :show-file-list="false" class="avatar-uploader" action="http://localhost:92/upload"
				 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<!--img 是用来显示上传图片的本地效果-->
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="saveUser('insertRuleForm')">保存</el-button>
				<el-button type="success">重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
	<!--添加用户的对话框结束-->


	<!--//授权对话框开始//-->
	<el-dialog :visible.sync="roleDialog" title="授权角色" width="60%" center>
		<el-checkbox-group v-model="checkedRoles" @change="handleCheckedRolesChange">
			<!--遍历角色{{role.nameZh}}名称    ：label是value值-->
			<el-checkbox v-for="role in roles" :label="role.id">{{role.nameZh}}</el-checkbox>
		</el-checkbox-group>

		<span slot="footer" class="dialog-footer">
			<el-button @click="roleDialog= false">取 消</el-button>
			<el-button type="primary" @click="saveRole">授 权</el-button>
		</span>

	</el-dialog>

	<!--//授权对话框结束//-->








	<!--编辑用户的对话框开始-->
	<el-dialog :visible.sync="editUserDialog" title="编辑用户" width="60%" center>

		<el-form :model="editFormModel" ref="editRuleForm" label-width="80px">

			<el-form-item label="登录名称" prop="username">
				<el-input v-model="editFormModel.username" placeholder="请输入登录名称"></el-input>
			</el-form-item>

			<el-form-item label="手机号" prop="phone">
				<el-input v-model="editFormModel.phone" placeholder="请输入手机号"></el-input>
			</el-form-item>

			<el-form-item label="性别">
				<!--label就是value值-->
				<el-radio v-model="editFormModel.sex" label="1" border>男</el-radio>
				<el-radio v-model="editFormModel.sex" label="0" border>女</el-radio>
			</el-form-item>

			<el-form-item label="角色">
				<el-checkbox-group v-model="checkedRoles" @change="handleCheckedRolesChange">
					<!--遍历角色{{role.nameZh}}名称    ：label是value值-->
					<el-checkbox v-for="role in roles" :label="role.id">{{role.nameZh}}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>

			<el-form-item label="省市区">
				<el-cascader v-model="value" :options="nations" :props="props" @change="handleChange"></el-cascader>
			</el-form-item>

			<el-form-item label="头像">
				<!--action 上传的地址  name的名称默认是file 就是上传到控制层的参数名称-->
				<!--on-success 成功/before-uploud 上传前处理是上传组件的钩子函数-->
				<el-upload name="file" :show-file-list="false" class="avatar-uploader" action="http://localhost:92/upload"
				 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<!--img 是用来显示上传图片的本地效果-->
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="editUser('editRuleForm')">修改</el-button>
				<el-button type="success">重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
	<!--编辑用户的对话框结束-->

</div>

、、、、、、、、、、、、、、、、、、、、、、、

	<el-form :model="serachModel" inline>
		<el-form-item label="姓名:">
			<el-input v-model="serachModel.userName" placeholder="请输入.."></el-input>
		</el-form-item>
		<el-form-item>
			<el-button icon="el-icon-search" @click="searchData()">搜索</el-button>
		</el-form-item>
		<el-col :span="38">
			<el-button icon="el-icon-edit" size="small" type="info" @click="insertDialogVisible" plain>添加</el-button>
			<!-- <el-button icon="el-icon-delete" size="small" type="danger" @click="deleteUser" plain>批量删除</el-button> -->
		</el-col>
	</el-form>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column prop="userName" label="姓名" width="180">
		</el-table-column>

		<el-table-column label="头像" width="180">
			<template slot-scope="scope">
			<el-avatar :src="scope.row.interfaces"></el-avatar>
			</template>
		</el-table-column>

		<el-table-column prop="gender" label="性别" width="180">
		</el-table-column>
		<el-table-column prop="marrageName" label="婚姻状况">
		</el-table-column>
		<el-table-column prop="houseName" label="住房情况">
		</el-table-column>
		<el-table-column prop="educationName" label="教育背景">
		</el-table-column>
	</el-table>
	<el-row :span="24">
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
		 :page-sizes="sizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
		 background>
		</el-pagination>
	</el-row>


	<!-- //添加//   -->
	<el-dialog title="添加" :visible.sync="insertStudentVisible" center>
		<el-form :model="UsertForm" ref="UsertForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="姓名:" prop="userName">
				<el-input v-model="UsertForm.userName" placeholder="请输入"></el-input>
			</el-form-item>

			<el-form-item label="性别:" prop="gender">
				<el-input v-model="UsertForm.gender" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="头像">
				<el-upload action="http://localhost:81/upload" :show-file-list="false" :on-success="handleAvatarSuccess"
				 :before-upload="beforeAvatarUpload" class="avatar-uploader" name="file">
					<img v-if="interfaces" :src="interfaces" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<!-- <el-form ref="insertUserForm" :model="insertUserForm">
				<span class="el-dropdown-link">
					下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
				</el-dropdown-menu>
			</el-form><br /> -->


		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="insertStudentVisible = false">取 消</el-button>
			<el-button type="primary" @click="saveUser('UsertForm')">保存</el-button>
		</div>
	</el-dialog>

	<!-- </--//添加//-->
</div>

//解决axios的跨域问题
axios.defaults.withCredentials=true