el-upload 上传图片、编辑时图片回显以及后续提交问题

功能描述：

添加图片

上传成功在表格内显示该图片

点击编辑，打开上传图片对话框，图片回显（与添加共用同一个对话框）

html代码：（具体添加、编辑按钮以及表格内显示上传成功的图片html代码就不放了，这里只展示upload组件相关代码）

<el-upload ref="ref1"action="":file-list="fileList"list-type="picture-card"accept="image/*":auto-upload="false":multiple="false":limit="1"><i class="el-icon-plus"></i>
</el-upload>
<el-button type="primary"@click="dialogConfirm">确定</el-button>

官网el-upload参数说明（这里只放了现用到的参数）：

参数	说明	类型	可选值	默认值
action	必选参数，上传的地址	string	—	—
multiple	是否支持多选文件	boolean	—	—
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string	—	—
list-type	文件列表的类型	string	text/picture/picture-card	text
auto-upload	是否在选取文件后立即进行上传	boolean	—	true
file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	—	[]
limit	最大允许上传个数	number	—	—

js代码：

<script>export default {data() {return {filelist:[]dialogMode:'create'//create、edit};},methods: {fillFormData(){let formData = new FormData();let photo = this.$refs['ref1'].uploadFiles[0];if(photo===undefined){this.$message.error("请选择照片");return false;}if(photo!==undefined){formData.append('照片', photo.raw);//根据后端需要的参数进行相应更改，大多是文件格式}return formData;},dialogConfirm() {let formData=this.fillFormData();if(this.dialogMode ==='edit'){//dialogMode用于判断当前时添加还是编辑this.api.update(formData).then(res => {//调用修改接口if (res.data.code == "OK") {this.$message({type: "success",message: "修改成功!",duration:5000});this.fileList=[];} else {this.$message.error(res.data.message);}},()=>{this.$message.error("修改失败");}).finally(()=>{});}else{this.api.insert(formData).then(res => {//添加接口if (res.data.code == "OK") {this.$message({type: "success",message: "新建成功!",duration:5000});this.fileList=[];} else {this.$message.error(res.data.message);}},()=>{this.$message.error("新建失败");}).finally(()=>{});}}},//点击编辑时图片回显edit(info){//info=>后台接口返回的数据 let url=this.baseUrl+info.photo//url的地址根据项目实际需要，info.photo=>图片路径,this.baseUrl=>上传的网络地址this.fileList=[];this.fileList.push({'url': url   })this.dialogMode='edit';//设置为编辑},onCreateNew(){this.fileList=[];this.dialogMode='create';//设置为添加},}}
</script>

el-upload 上传图片、编辑时图片回显以及后续提交问题相关推荐

antd 图片上传遇到的坑----图片回显（Upload）
antd 图片上传遇到的坑----图片回显(Upload) 最近又被安排了一个前端的项目,遇到了一个图片上传的问题,用的是antd的Upload组件,在这遇到的问题和大家分享一下,下网可以帮到需要的人 ...
java 图片回显_java实现Simditor图片上传七牛云并回显
首先呢,我们有这样一个需求: 当图片上传Simditor时,将其保存到七牛云上,然后并回显在我们的Simditor中. 首先,需要我们有一个七牛云帐号,并且配置Simditor富文本编辑器. 其次,我 ...
uniapp、uview——图片上传（单图上传、多图上传、多组照片上传、图片回显）
一.简介 uView组件的上传功能,单图上传.多图上传等. 官方文档地址: https://www.uviewui.com/components/upload.html 二.步骤 (一)单图上传 1. ...
java图片上传及图片回显1
目的:选择图片,进行图片回显之后将图片保存到服务器上(PS:没有使用任何插件,样式很丑) 实现方式: js+servlet+jsp的方式来实现事先准备: 文件上传处理在浏览器中是以流的形式提交到服务 ...
【.net】Ueditor中图片上传和图片回显路径的设置
在csdn六百多天的游侠今日现身江湖. 问题发生的背景: 所有项目代码中,图片上传都是固定存到一个图片专属的盘符,这样就可以整个盘符对所有图片进行备份以防丢失. 但是!有一个站点所引用的百度编辑器(主 ...
【SpringBoot】简单的文件上传和文件下载以及图片回显
介绍这里是小编成长之路的历程,也是小编的学习之路.希望和各位大佬们一起成长! 以下为小编最喜欢的两句话: 要有最朴素的生活和最遥远的梦想,即使明天天寒地冻,山高水远,路远马亡. 一个人为什么要努力? ...
处理vue elementui图片回显编辑/修改/删除
需求elementui提供啦美观的控件支持页面快速开发, 这里结合jq来实现控件图片上传后的回显问题,回显还能进行编辑,效果如下代码: html中加入:file-list="fileLis ...
Vue中使用的el-upload开启multiple属性，但onSuccess部分数据status:uploading状态，影响图片回显
最近在后管vue项目中有个上传图片使用elementUI的el-upload组件要改为支持多选图片,本来是很简单的一个属性问题,但是在开启multiple多选属性后,发现onSuccess中的resp ...
ElementUI中el-radio-group使用v-model绑定是属性为String字符串类型时不回显数据
场景结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-ra ...

el-upload 上传图片、编辑时图片回显以及后续提交问题

el-upload 上传图片、编辑时图片回显以及后续提交问题相关推荐

最新文章

热门文章