<el-upload
  class="upload-demo"
  action=""http://引號(hào)里面填要上傳的圖片地址，用接口的話是公共的接口地址拼接一個(gè)圖片的接口
  :on-preview="handlePreview"http://圖片已經(jīng)上傳完成時(shí)點(diǎn)擊觸發(fā)（鉤子函數(shù)）
  :on-remove="handleRemove"http://點(diǎn)擊右上角X號(hào)觸發(fā)的鉤子函數(shù)
  :on-success="handleSuccess"http://上傳成功的一個(gè)鉤子函數(shù)
  :file-list="fileList"http://上傳的文件列表
  list-type="picture"http://上傳的文件類型，有三個(gè)參數(shù)，分別是text/picture/picture-card，分別是文本類型、圖片類型、卡片類型。個(gè)人推薦選第二個(gè)較好
  :headers="headerObj"http://圖片上傳的時(shí)候需要請(qǐng)求頭部，我們可以定義一個(gè)變量，設(shè)置獲取token信息，如下代碼:
>
  <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
  <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
 
//存放token的變量
 headerObj: {
        Authorization: window.localStorage.getItem("token"),
      },

  <el-dialog
      title="圖片預(yù)覽"http://上方的標(biāo)題
      :visible.sync="previewDialogVisible"http://控制顯示隱藏的變量
      width="50%"http://彈框的寬度占比
    >
        //img標(biāo)簽中的src屬性接受的是點(diǎn)擊預(yù)覽時(shí)傳遞的圖片地址
      <img :src="picPreviewPath" alt="" class="previewImg" />
    </el-dialog>

  // 處理圖片預(yù)覽
    handlePreview(file) {//會(huì)得到一個(gè)參數(shù)，這是返回的圖片的一些信息，主要的是圖片的url
      this.picPreviewPath = file.response.data.url;//把url參數(shù)賦值給這個(gè)變量
      this.previewDialogVisible = true;//再讓彈框顯示
    },

 // 處理移除圖片的操作
    handleRemove(file) {
      // 1.獲取將要?jiǎng)h除圖片的臨時(shí)路徑
      const filePath = file.response.data.tmp_path;
      // 2.從pics數(shù)組中，找到圖片對(duì)應(yīng)的索引值
      const i = this.addForm.pics.findIndex((x) => x.pic === filePath);
      // 3.調(diào)用splice方法，移除圖片信息
      this.addForm.pics.splice(i, 1);
    },

 // 監(jiān)聽圖片上傳成功事件
    handleSuccess(response) {
      // 1.拼接得到一個(gè)圖片信息對(duì)象 臨時(shí)路徑
      const picInfo = { pic: response.data.tmp_path };
      // 2.將圖片信息對(duì)象，push到pics數(shù)組中
      this.addForm.pics.push(picInfo);
    },