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

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

上传图片：

<el-form-item label="专区logo：" style="height:160px">
            <div class="img">
              <el-upload action="https://testopenapi.nbdeli.com/crm/customer/saveChannelLogoFile" :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; //专区logoId this.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); });