Vue+UpLoad實現(xiàn)上傳預覽和刪除圖片的實踐

更新時間：2022年02月20日 15:08:22 作者：仰.

本文主要介紹了Vue+UpLoad實現(xiàn)上傳預覽和刪除圖片的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

1、用vue+Element完成一個圖片上傳、點圖預覽、加刪除功能，如圖：

2.首先我們再組件中引入這一段代碼，每個屬性的使用也都放在這里了：

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

3.接下來就是它的on-preview屬性，我們可以用它來實現(xiàn)圖片預覽

先要設一個圖片預覽的彈框：

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

再進行邏輯操作

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

3.然后來實現(xiàn)點擊刪除圖片，這時候用到了on-remove這個屬性

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

4.前面的功能都實現(xiàn)了的話，到這時候你已經(jīng)成功了一半了，若項目需要提交添加的圖片，則用到了它的on-success屬性。

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

5.文章小提示：