功能描述：
添加图片
上传成功在表格内显示该图片
点击编辑，打开上传图片对话框，图片回显（与添加共用同一个对话框）
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参数说明（这里只放了现用到的参数）：
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>
