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

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

上传图片：

1<el-form-item label="专区logo：" style="height:160px">
2            <div class="img">
3              <el-upload
4                action="https://testopenapi.nbdeli.com/crm/customer/saveChannelLogoFile"
5                :limit="1"
6                :on-preview="handlePictureCardPreview"
7                :on-success="handleUploadSuccess"
8                list-type="picture-card"
9                :on-remove="handleRemove"
10                :class="{disabled:uploadDisabled}"
11                :file-list="fileList"
12              >
13                <i class="el-icon-plus"></i>
14              </el-upload>
15              <el-dialog :visible.sync="dialogVisible">
16                <img width="100%" :src="ruleForm.dialogImageUrl" alt />
17              </el-dialog>
18            </div>
19            <div class="imgSpan2">只能上传jpg/png文件，50X50px</div>
20          </el-form-item>
21
22data(){
23  return{
24    uploadDisabled: false,

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

       dialogVisible: false,

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

//删除图片

handleRemove(file, fileList) {

console.log(file);

this.uploadDisabled = false;

},

1//上传中
2    handlePictureCardPreview(file) {
3      this.dialogImageUrl = file.url;
4      console.log(this.dialogImageUrl);
5      this.dialogVisible = true;
6      this.uploadDisabled = true;
7    },
8    //上传成功
9    handleUploadSuccess(file) {
10      this.ruleForm.dialogImageUrl = file.result; //专区logoId
11      this.uploadDisabled = true;
12    },

上传图片就完成了

以下是编辑图片;

1在点击编辑的时候 ，获取url地址需要把url 添加到 fileList 里面  
2
3let urlStr = response.data.result.url.split(","); //logo地址
4          urlStr.forEach(item => {
5            let obj = new Object();
6            obj.url = item;
7            this.fileList.push(obj);
8          });