vue實踐筆記--上傳圖片 el-upload標籤

主要解決兩個問題：
1，上傳一張圖片，再上傳一張，原來的被覆蓋
2，怎麼獲得上傳的圖片的地址？

總代碼如下：

<el-form-item label="*圖片：">
              <el-upload
                ref="upload"
                :file-list="fileListData"
                :action="actionUrl"
                list-type="picture-card"
                :multiple="true"
                name="files"
                :on-remove="handleRemove"
                accept="image/*"
                :before-upload="beforeUpload"
                :with-credentials="true"
                :on-success="imgUploadSuccess"
                :on-error="imgUploadFalse"
                :limit=100
                :headers="uploadHeader"
                :on-preview="handlePictureCardPreview">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>

data裏面：

fileUploadJson:[],

methods裏面：

methods: {
    //批量駁回覆蓋之前上傳的文件
    handleChange(file,fileList){
      if(fileList.length>1){
        fileList.splice(0,1);
      }
    },
    beforeUpload(file){
        this.fileUploadJson.push({url:file.url});
    },
    imgUploadSuccess(response, file, fileList){
  for(var i =0 ;i<this.fileUploadJson.length;i++){
    if(this.fileUploadJson[i].name === file.name){
      **this.fileUploadJson[i].url = response.data;**//this.fileUploadJson[i].url就是圖片的地址
    }
  }

  this.listQuery.imgUrl=response.data;//將圖片的地址賦值給自己想要賦值的屬性： this.listQuery.imgUrl
},
    }

關於解答第一個問題：
注意：因爲上面的代碼的樣式是圖片+,也有刪除，所以沒有覆蓋那個問題了，但是如果想要覆蓋，就是下面兩個步驟
主要有兩點：
1，:el-upload裏面;

on-change=" handleChange"

2，methods裏面：

 //批量駁回覆蓋之前上傳的文件
    handleChange(file,fileList){
      if(fileList.length>1){
        fileList.splice(0,1);
      }
    },

關於解答第二個問題：
1，el-upload裏面：

:before-upload="beforeUpload" 

 :on-success="imgUploadSuccess"
 2，data裏面：

fileUploadJson:[],

3，methods裏面：

beforeUpload(file){
this.fileUploadJson.push({url:file.url});
},

imgUploadSuccess(response, file, fileList){
      for(var i =0 ;i<this.fileUploadJson.length;i++){
        if(this.fileUploadJson[i].name === file.name){
          this.fileUploadJson[i].url = response.data;
        }
      }

      this.listQuery.imgUrl=response.data;
    },