快捷導(dǎo)航

vue前端實現(xiàn)批量上傳圖片功能并回顯圖片

更新時間：2025年10月24日 09:02:57 作者：涼柚ˇ

這篇文章主要為大家詳細介紹了vue前端實現(xiàn)批量上傳圖片功能并回顯圖片的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

核心功能實現(xiàn)

在Vue組件的data函數(shù)中定義一個數(shù)組來存儲選中的文件，并在methods中添加一個方法來處理文件選擇事件。

methods: {
updateImgs(fieldname) {
      const inputFile = document.createElement('input')
      inputFile.type = 'file'
      inputFile.accept = 'image/*' // 只接受圖片文件
      inputFile.multiple = true // 允許選擇多個文件

      inputFile.click() // 觸發(fā)文件選擇對話框

      inputFile.onchange = async (e) => {
        const files = e.target.files // 獲取所有選中的文件
        if (!files.length) return // 如果沒有選中文件，直接返回

        // 遍歷每個文件
        for (let i = 0; i < files.length; i++) {
          const file = files[i]
          const fileSizeMB = file.size / (1024 * 1024) // 轉(zhuǎn)換為MB

          if (fileSizeMB > 2) {
            // 文件大小超過2MB，顯示提示信息
            this.$message.error(`文件 ${file.name} 大小不能超過2MB`)
            continue // 跳過當前文件，繼續(xù)檢查下一個文件
          }

          // 使用 FormData 來構(gòu)建上傳的數(shù)據(jù)
          const formData = new FormData()
          formData.append('file', file)

          try {
            const { data: res } = await uploadFile(formData) // 你的配置后的上傳圖片接口
             //根據(jù)接口返回存圖片的url 例this.xxx = res，之后應(yīng)用到你的新增/編輯接口
             this.reportData.projimplement.imglist.push({
                  url: res.data.filePath,
                  description: file.name
                })
          } catch (error) {}
        }
      }
    },
    getFullImageUrl(relativePath) {
      // 結(jié)合服務(wù)器前綴和相對路徑
      return `${this.serverPrefix}${relativePath}`
    },
    getPreviewList(imgList) {
    // 顯示圖片組
      return imgList.map((item) => this.getFullImageUrl(item.url))// 你的結(jié)構(gòu)
    }
  }

實現(xiàn)了以下功能：

0.創(chuàng)建文件輸入元素：使用document.createElement創(chuàng)建一個新的元素，類型設(shè)置為file，并且設(shè)置了accept屬性來限制用戶只能選擇圖片文件，同時設(shè)置了multiple屬性允許用戶選擇多個文件。

1.觸發(fā)文件選擇對話框：通過調(diào)用inputFile.click()方法，模擬用戶點擊文件輸入框，從而觸發(fā)操作系統(tǒng)的文件選擇對話框。

2.處理文件選擇：通過監(jiān)聽inputFile元素的onchange事件，當用戶選擇了文件后，事件處理函數(shù)會被觸發(fā)。

3.文件大小檢查：在事件處理函數(shù)中，首先獲取所有選中的文件，然后遍歷這些文件，檢查每個文件的大小是否超過2MB。如果文件大小超標，則顯示錯誤提示并跳過該文件。

4.構(gòu)建FormData：對于每個符合大小要求的文件，使用FormData對象來構(gòu)建一個表單數(shù)據(jù)對象，并將文件附加到這個對象中。

5.異步上傳文件：使用async/await語法，調(diào)用uploadFile函數(shù)（這個函數(shù)沒有在代碼中定義，可能是組件的另一個方法或者外部服務(wù)）來異步上傳文件。uploadFile函數(shù)接收一個FormData對象作為參數(shù)，并返回一個包含上傳結(jié)果的Promise。

6.處理上傳結(jié)果：如果上傳成功（res.success為true），則根據(jù)傳入的fieldname參數(shù)，將文件路徑添加到組件的相應(yīng)數(shù)據(jù)屬性中。之后顯示成功消息。

7.錯誤處理：如果上傳過程中出現(xiàn)錯誤，catch塊會捕獲異常，但當前的實現(xiàn)中并沒有做任何錯誤處理，只是簡單地忽略了錯誤。

HTML部分

<div style="position: relative">
            <el-button class="upimg_but" type="primary" size="small" @click="updateImgs"
              >上傳</el-button
            >
            <div class="img-block">
              <div class="img-box" v-for="(item, index) in reportData.projimplement.imglist" :key="index">
                <el-tooltip effect="dark" :content="item.description" placement="bottom">
                  <el-image
                    style="width: 150px; height: 150px"
                    :src="getFullImageUrl(item.url)"
                    fit="contain"
                    lazy
                    :preview-src-list="getPreviewList(reportData.projimplement.imglist)"
                  ></el-image>
                </el-tooltip>
                <i class="el-icon-delete" style="cursor: pointer" @click="deleteImg(index)"></i>
              </div>
            </div>
          </div>

CSS部分

.img-block {
  padding-top: 30px;
  max-height: 320px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;

  &::-webkit-scrollbar-track-piece {
    background: #e4e4e4;
  }

  &::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c2c2c2;
    border-radius: 20px;
  }

  .img-box {
    width: 33%;
    text-align: center;
    margin: 8px 0;
  }
}