1.页面导入elementUi(略)
2.在页面合适位置编写上传图片模块
<el-upload
id="upload"
class="upload-demo"
ref="upload"
:on-change="changeUp"
:on-remove="changeRe"
list-type="picture-card"
:action="httpurl + 'b_jxpc_cpjsbjtpxx/save/'"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:with-credentials="true"
:auto-upload="false"
:data="accData"
:on-success="handleAvatarSuccess"
:on-error="handleAvatarError"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
- 参数说明
3.编写JS
自带data数据
自带函数
发送请求
- this.$refs.upload.submit() 即可发送请求
附带参数
- 如果在保存图片时需同时发送其他参数,可使用 :data=“xxx” 进行附带
- 在后端controller直接获取使用
上传一张图片后隐藏上传框
- 调用on-change函数即可
- 删除图片后重新显示 on-remove即可(同理)
图片回显
- 调用 file-list函数
- 先在data里让fileList为空[]
- 判断是否存在图片:有数据的话改变fileList,否则继续为空[]
- 具体使用参考element官方