个人blog,欢迎关注加收藏
- 页面效果
- html代码:弹框:表单中包含图片上传的组件el-upload
//html
<!-- 弹框 -->
<div class="dialog">
<el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="图标" label-width="7.5rem">
<!-- :data="upLoadData" -->
<el-upload class="avatar-uploader"
action="111" //这里随便写,反正用不到,但是又必须要写,无奈
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="分类名" label-width="7.5rem">
</el-form-item>
<el-form-item label="中文" label-width="7.5rem">
<el-input v-model="form.chinese" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="英文" label-width="7.5rem">
<el-input v-model="form.english" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="sureFormSubmit">确 定</el-button>
</div>
</el-dialog>
</div>
- js代码
<script>
export default {
name: 'secondaryClassification',
data () {
return {
formTitle: '编辑',//表单标题
dialogFormVisible:false,//对话框是否可见
//对话框表单
form: {
imageUrl: '',
chinese: '',
english: '',
},
// upLoadData:{//上传时附带的其他参数
// srid:''
// }
}
},
methods: {
//图片上传成功实现本地预览
handleAvatarSuccess(res, file) {
let _this = this;
_this.form.imageUrl = URL.createObjectURL(file.raw);
},
//上传之前的钩子函数
beforeAvatarUpload(file) {
let fd = new FormData();
fd.append('file',file);//传文件
// fd.append('srid',this.upLoadData.srid);//传其他参数
axios.post('/api/up/file',fd).then(function(res){
console.log('成功');
})
return false//屏蔽了action的默认上传
},
//提交表单
sureFormSubmit(){
let _this = this;
let api = '';
_this.axios.post(api,{}).then(res=>{console.log(res)});
}
}
</script>
- css代码
//css
/* 对话框 */
.secondaryClassification>>>.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.secondaryClassification>>>.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.secondaryClassification>>>.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.secondaryClassification>>>.avatar {
width: 178px;
height: 178px;
display: block;
}
- 上传图片的代码原理解析:
- el-upload的action随便填写
action="111" //这里随便写,反正用不到,但是又必须要写,无奈
,在钩子函数:before-upload="beforeAvatarUpload"
阻止action的默认行为,再用钩子函数beforeAvatarUpload
上传图片,将图片封装成formData对象,用ajax将图片对象传给后台接收图片的接口(后台需要提供一个单独上传图片的接口):
//上传之前的钩子函数
beforeAvatarUpload(file) {
let api = /api/up/file;
let fd = new FormData();
fd.append('file',file);//传文件
// fd.append('srid',this.upLoadData.srid);//传其他参数
axios.post(api,fd).then(function(res){
console.log('成功');
})
return false//屏蔽了action的默认上传
}
- 上传成功后用钩子函数
:on-success="handleAvatarSuccess"
实现本地预览,并获取到表单提交时需要的图片路径:
//图片上传成功实现本地预览
handleAvatarSuccess(res, file) {
let _this = this;
_this.form.imageUrl = URL.createObjectURL(file.raw);//表单获取到提交时要传的图片路径
},
<el-upload class="avatar-uploader"
action="111" //这里随便写,反正用不到,但是又必须要写,无奈
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
//图片的本地预览
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
//提交表单
sureFormSubmit(){
let _this = this;
let api = '';
_this.axios.post(api,{}).then(res=>{console.log(res)});
}