Element upload组件上传图片与回显图片

上传图片与回显图片"/>

Element upload组件上传图片与回显图片

场景：新增商品时需要添加商品主图，新增成功之后可编辑

上传图片：

<el-form-item label="专区logo：" style="height:160px"><div class="img"><el-uploadaction="":limit="1":on-preview="handlePictureCardPreview":on-success="handleUploadSuccess"list-type="picture-card":on-remove="handleRemove":class="{disabled:uploadDisabled}":file-list="fileList"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="ruleForm.dialogImageUrl" alt /></el-dialog></div><div class="imgSpan2">只能上传jpg/png文件，50X50px</div></el-form-item>

data(){return{uploadDisabled: false,

        logoId: "1", //专区logo id

       dialogVisible: false,

      fileList: [],ruleForm: {dialogImageUrl: "1", //专区logo 上传到后台之后，后台会返回一个id,只需要给后台传id,但是点击编辑的时候后台返回的是http地址},}  
}

//删除图片

handleRemove(file, fileList) {

console.log(file);

this.uploadDisabled = false;

},

//上传中handlePictureCardPreview(file) {this.dialogImageUrl = file.url;console.log(this.dialogImageUrl);this.dialogVisible = true;this.uploadDisabled = true;},//上传成功handleUploadSuccess(file) {this.ruleForm.dialogImageUrl = file.result; //专区logoIdthis.uploadDisabled = true;},

上传图片就完成了

以下是编辑图片;

在点击编辑的时候 ，获取url地址
需要把url 添加到 fileList 里面  

let urlStr = response.data.result.url.split(","); //logo地址urlStr.forEach(item => {let obj = new Object();obj.url = item;this.fileList.push(obj);});