1摄悯、利用el-tabs標(biāo)簽陌兑，動(dòng)態(tài)添加專利信息租谈，以及圖片

image

<!-- 動(dòng)態(tài)添加專利 -->
<el-card class="box-card">
  <div slot="header" class="clearfix">
      <span>專利信息</span>
    </div>
    <el-tabs v-model="editableTabsValue" type="card" @edit="handleTabsEdit" @tab-click="click_tab(index)" addable>
      <el-tab-pane
        :key="index"
        v-for="(item, index) in editableTabs"
        :label="item.title"
        :name="item.name">
        <el-row>
          <el-col :span="8">
            <el-form-item label="標(biāo)題" >
              <el-input v-model="zlTitle[index]" placeholder="請(qǐng)輸入標(biāo)題" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述">
              <el-input v-model="zlContent[index]" placeholder="請(qǐng)輸入描述" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="width: 100%">
              <el-form-item label="上傳專利" prop="checkinTime">
              <el-form :model="form">
                  <el-upload
                    ref="upload_zhuanli"
                    action="#"
                    accept="image/png,image/gif,image/jpg,image/jpeg"
                    list-type="picture-card"
                    :limit=7
                    :file-list="fileList_zhuanli[index]"
                    :before-upload="(file,fileList_zhuanli) => {
                      beforeAvatarUpload_zhuanli(file, fileList_zhuanli, index)
                    }"
                    :on-remove="(file,fileList) => {
                      handleRemove_zhuanli(file, fileList, index)
                    }"
                    :on-success="fileSuccess_zhuanli"
                    multiple>
                    <i class="el-icon-plus"></i>
                  </el-upload>
              </el-form>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
</el-card>   

fileList_zhuanli:[],
zlTitle:[],
zlContent:[],

// 專利上傳
beforeAvatarUpload_zhuanli(file, fileList, index) {
      
      var self = this;
      const isLt2M = file.size / 500 / 500 < 2;
      if (!isLt2M) {
        this.$alert('圖片大小不能超過(guò)500KB', '提示', {
          confirmButtonText: '確定',
        });
        return false;
      }

      if(isLt2M){
        var imgRelationId_zhuanli = self.guid();
        if('' == self.imgRelationId_zhuanli[index] || null == self.imgRelationId_zhuanli[index]){
          self.imgRelationId_zhuanli[index] = imgRelationId_zhuanli;
        }
        let fd = new FormData();
        fd.append('file',file);//傳文件
        fd.append('relationId',self.imgRelationId_zhuanli[index]);//傳其他參數(shù)
        // 上傳圖片
        upload_img(fd).then(response => {
          var img={
            id : response.data.id, 
            url : response.data.url,
          };
          var imgArr = [];
          imgArr = self.fileList_zhuanli[index];

          if(undefined == imgArr || null == imgArr || "" == imgArr){
            imgArr = [];
            imgArr.push(img);
            self.$set(self.fileList_zhuanli,index,imgArr);
          }else if(imgArr.length > 0){
            self.$set(self.fileList_zhuanli, index, [...self.fileList_zhuanli[index], img])  
          }

        });
      }
      return isLt2M;
},

// 專利刪除
handleRemove_zhuanli(file, fileList, index) {
  // 刪除圖片
  if(undefined != file.id && '' != file.id){
    delete_img(file.id).then(response => {
      this.fileList_zhuanli[index] = fileList;
    });
  }
},

注意：
使用es6匿名函數(shù) 調(diào)用上傳方法，并傳入當(dāng)前tab標(biāo)簽頁(yè)index
:before-upload="(file,fileList_zhuanli) => {
beforeAvatarUpload_zhuanli(file, fileList_zhuanli, index)
}"
這個(gè)寫法是展氓，在當(dāng)面標(biāo)簽頁(yè)圖片基礎(chǔ)上添加成功上傳的圖片
self.$set(self.fileList_zhuanli, index, [...self.fileList_zhuanli[index], img])