后台管理功能实现¶
1. 添加用户&上传头像¶
1.1 添加用户¶
<!-- @submit.prevent 阻止默认表单提交action动作执行 -->
<form @submit.prevent="onLoginSubmit">
用户名: <input name="username" v-mode="user.username"/>
密码: <input name="password" v-mode="user.password"/>
<input type="submit" value="登录"/>
</form>
<!-- 方式二-->
<form @submit.prevent>
用户名: <input name="username" v-mode="user.username"/>
密码: <input name="password" v-mode="user.password"/>
<input type="submit" value="登录" @click="onLogin"/>
</form>
import {RequestUserAdd} from '@/api/UserApi.js'
new Vue({
data:{
user:{
username:'',
password:''
}
},
methods:{
onLoginSubmit(){
},
onLogin(){
// 1.获取表单输入框用户名和密码
let username = this.user.username;
let password = this.user.password;
// 2.表单验证
// 3. 调用添加用户接口
RequestUserAdd(username,password).then(res=>{
if(res.data.resultCode == 1){
// 添加用户成功
}
}).catch(err=>{
})
}
}
})
1.2添加用户&上传头像¶
1.2.1 完成代码¶
<el-form @submit.prevent>
<el-form-item label="用户名">
<el-input placeholder="请输入用户名" name="username" v-model="user.username"/>
</el-form-item>
<el-form-item label="密码">
<el-input placeholder="请输入密码" name="psw" v-model="user.psw"></el-input>
</el-form-item>
<el-form-item label="头像">
<!--
action： 上传图片到服务器接口地址
show-file-list: 是否显示选中图片地址列表
list-type: picture-card 预览效果
auto-upload: true|false 是否自动提交图片到服务器
on-change : 内容转变事件
:data 将表单数据绑定到el-upload组件上，一起提交给服务端
-->
<el-upload
ref='userUpload'
name='fileHeader'
:action="baseURL+'/api/add'"
:show-file-list="false"
list-type="picture-card"
:auto-upload="false"
:on-change="onChangeFile"
:on-success="onSuccessFile"
:data="user">
<!-- 预览本地上传文件-->
<el-image v-if="imageUrl" :src="imageUrl" />
<i v-else class="el-icon-plus "></i>
</el-upload>
</el-form-item>
<el-form-item>
<el-button @click="onAddUser" type="primary">添加</el-button>
</el-form-item>
</el-form>
import { baseURL } from "@/api/request.js";
export default {
data() {
return {
baseURL:baseURL,
user: {
username : "",
psw: ""
},
imageUrl:'',
}
},
methods: {
// 选中本地图片预览效果
onChangeFile(file){
this.imageUrl = URL.createObjectURL(file.raw);
},
onAddUser() {
// 添加用户
this.$refs.userUpload.submit(); // 手动上传图片
},
// 文件上传成功回调
onSuccessFile(){
this.$router.replace({path:'/user/list'})
}
}
}
1.2.2 分步实现¶
- elmentui上传组件 el-upload界面效果
<el-upload list-type="picture-card" >
<!-- 预览本地上传文件-->
<el-image v-if="imageUrl" :src="imageUrl" />
<i v-else class="el-icon-plus "></i>
</el-upload>
- 图上预览效果
<el-upload
list-type="picture-card"
:show-file-list="false"
:auto-upload="false"
:on-change="onChangeFile"
>
<!-- 预览本地上传文件-->
<el-image v-if="imageUrl" :src="imageUrl" />
<i v-else class="el-icon-plus "></i>
</el-upload>
methods: {
// 选中本地图片预览效果
onChangeFile(file){
this.imageUrl = URL.createObjectURL(file.raw);
}
}
- 绑定表单数据，如: 用户名和密码
<el-upload
list-type="picture-card"
:show-file-list="false"
:auto-upload="false"
:on-change="onChangeFile"
:data="user"
>
<!-- 预览本地上传文件-->
<el-image v-if="imageUrl" :src="imageUrl" />
<i v-else class="el-icon-plus "></i>
</el-upload>
- 上传图片并提交表单数据
<el-upload
list-type="picture-card"
:show-file-list="false"
:auto-upload="false"
:on-change="onChangeFile"
:data="user"
ref='userUpload'
name='fileHeader'
:action="baseURL+'/api/add'"
>
<!-- 预览本地上传文件-->
<el-image v-if="imageUrl" :src="imageUrl" />
<i v-else class="el-icon-plus "></i>
</el-upload>
methods: {
// 上传图片事件
onAddUser() {
// this.$refs.userUpload 图片组件
this.$refs.userUpload.submit();
},
}
- 提交成功处理
<el-upload
list-type="picture-card"
:show-file-list="false"
:auto-upload="false"
:on-change="onChangeFile"
:data="user"
ref='userUpload'
name='fileHeader'
:action="baseURL+'/api/add'"
:on-success="onSuccessFile"
>
<!-- 预览本地上传文件-->
<el-image v-if="imageUrl" :src="imageUrl" />
<i v-else class="el-icon-plus "></i>
</el-upload>
// 文件上传成功回调
onSuccessFile(){
this.$router.replace({path:'/user/list'})
}
2.添加用户上传头像，formData实现¶
2.1 预览图片-同方法一¶
2.2 获取本地文件对象¶
<el-upload
list-type="picture-card"
:show-file-list="false"
:on-change="onChangeFile"
<!--要成功获取到文件对象，必须将图片自动上传打开，auto-upload=true; action指一个不存在地址-->
:auto-upload="true"
action="/"
:before-upload="onbeforeUpload">
<el-image v-if="imageUrl" :src="imageUrl"/>
<i v-else class="el-icon-plus"></i>
</el-upload>
onbeforeUpload(file){
console.log('onbeforeUpload file >>>> ',file);
this.user.headerFile = file;
}
// 要成功获取到文件对象，必须将图片自动上传打开，auto-upload=true; action指一个不存在地址
2.3 封装FormData提交数据¶
onAddUser() {
let username = this.user.username;
let psw = this.user.psw;
let fileHeader = this.user.headerFile; // 上传文件
let formData = new FormData(); // 创建formdata对象
formData.append('username',username);
formData.append('psw',psw);
formData.append('fileHeader',fileHeader);
RequestUserAdd(formData).then(res=>{
console.log(res.data);
}).catch(err=>{
console.log(err);
})
},
2.4 网络接口¶
/* 添加用户 */
export const RequestUserAdd = (fromData)=>{
return AxiosServe({
url: '/api/add',
method: 'post',
headers: {'Content-Type':'multipart/form-data'},
data: fromData
})
}