element admin添加对话框中
上传图片后,执行插入操作,数据库中没有图片信息,
使用:on-success="handleUploadSuccess"绑定方法 ,
上传成功后将你的表单图片字段赋值为文件的请求路径
上传图片后清除不了,使用 ref="upload"
在方法中this.$refs.upload.clearFiles();获取el-upload,实现清空
<!--添加对话框-->
<el-dialog
:title="storeForm.storeId ? '修改门店' : '新增门店'"
:visible.sync="dialogFormVisible"
width="45%"
:before-close="handleClose"
>
<el-form
:model="storeForm"
ref="storeForm"
label-width="100px"
:inline="true"
class="demo-form-inline"
:rules="editFormRules"
>
<div>
<el-form-item label="门店图片:" prop="image">
<el-upload
action=" http://localhost:8888/admin/common/upload"
list-type="picture-card"
:auto-upload="true"
ref="upload"
v-model="storeForm.imgUrl"
:on-success="handleUploadSuccess"
>
<!-- ref="upload"清空图片数组的-->
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{ file }">
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
图片大小不超过5M<br/>
</el-form-item>
</div>
<el-form-item label="联系电话" prop="tel">
<el-input
v-model="storeForm.tel"
style="width: 520px; padding-right: 200px"
></el-input>
</el-form-item>
</el-dialog>
//表单
storeForm: {
storeId: 0,
name: "",
address: "福建省",
admin: "",
tel: "0591-88888888",
detail: "",
open: "",
close: "",
imgUrl: "",
},
methods: {
handleUploadSuccess(response, file, fileList) {
// 上传成功后将 imgUrl 赋值为文件的请求路径
this.storeForm.imgUrl = response.data;
},
handleRemove(file) {
//获取el-upload,实现清空
this.$refs.upload.clearFiles();
this.$message.success("图片删除成功!");
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},