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); });