解决element 照片墙根据图片地址回显的问题
首先我们先来看html的部分
<el-upload :data="Token" //上传时附带的额外参数 :action="tool.Request.file + '/api/post/file'" //上传服务器的地址 list-type="picture-card" :limit='9' //最大允许上传9个图片 :file-list="fileList" //回显我们需要用到此参数 :before-upload="beforeUpload" //上传文件之前的钩子 :on-success="handleAvatarSuccess" //文件上传成功时的钩子 :on-preview="handlePictureCardPreview" //点击文件列表中已上传的文件时的钩子 :on-remove="handleRemove"> //文件列表移除文件时的钩子 <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> //这是点击放大图片 <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog>
data部分
fileList:[],
dialogVisible:false,
dialogImageUrl:''
接下来我们看js部分
//res.result.fileArray 是后端返回我上传的图片数组
注意:放到fileList里面的图片地址格式为[{url:'xxxxxx.png'},{url:'xxxxxx.png'}]
let listarray = JSON.parse(res.result.fileArray) listarray.forEach(item => { let obj = { url:this.tool.Request.server + item //后端反我的是半截地址,我自己需要拼接前面的部分 } this.fileList.push(obj) //这个时候就能看见回显了,如下图,(但是当我点击移除某一个图片的时候会报错,处理办法看我移除时的函数) })
//这是我们上传成功时的函数
handleAvatarSuccess(res, file){ if(res.errorCode === 200){ this.fileArray.push(res.result) //这点我们把没次上传成功的图片地址装到 fileArray里面 (我这点是收集起所有上传的图片地址,后面点击提交的时候传给后端) this.tool.Messages(this,'success','上传成功!') //这是我封装的消息提示,可以不用管 }else{ this.tool.Messages(this,'error','上传失败!') } },
//这是我们点击移除时的函数
handleRemove(file, fileList) { this.fileArray = [] //初始化我装图片地址的容器,(我需要传给后端的) fileList.forEach(item => { try{ this.fileArray.push(item.response.result) //这是还没有上传到服务器的时候,移除某一个图片的 }catch(e){ //当抛出异常时的处理 this.fileArray.push(item.url) //回显之后,移除某一个图片 } }) },