詳解el-upload圖片回顯

在開發過程中，圖片上傳和展示是非常常見的需求。而Vue的Element UI庫中的組件el-upload提供了圖片上傳以及圖片回顯的功能，使用起來也非常方便。本文將從多個方面詳細介紹el-upload圖片回顯的相關知識。

一、圖片回顯基礎

圖片回顯是指在頁面上展示已經上傳的圖片，這是圖片上傳功能的必備環節。在el-upload中，圖片回顯分為兩種情況：一是通過URL展示已上傳的圖片，二是通過Base64展示已上傳的圖片。

要實現圖片回顯，需要在el-upload標籤內添加一個el-image組件，在組件的src屬性中綁定需要回顯的圖片地址或Base64編碼。代碼示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="false"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">選取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>

需要注意的是，如果使用URL進行圖片回顯，則需要伺服器返回URL地址；如果使用Base64進行圖片回顯，則需要在伺服器返回成功的信息中包含圖片的Base64編碼。

二、圖片單選和多選

el-upload提供了單選和多選的功能，可以根據需求進行選擇。默認情況下，el-upload是多選的，可以通過設置屬性before-upload的返回值來控制是否可以多選或單選。

多選代碼示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="false"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">選取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>

單選代碼示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="false"
    :on-success="handleUploadSuccess"
    :before-upload="handleBeforeUpload">
  <el-button slot="trigger">選取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>


export default {
  methods: {
    handleBeforeUpload() {
      return false;
    }
  }
}
</script>

三、圖片裁剪和壓縮

在上傳圖片的過程中，有時候需要將圖片進行裁剪或壓縮，以減小圖片的大小和體積，提高網頁載入速度。el-upload為圖片裁剪和壓縮提供了相應的方法。

裁剪代碼示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="false"
    :before-upload="handleBeforeUpload"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">選取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>


export default {
  methods: {
    handleBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上傳圖片只能是 JPG/PNG/GIF 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上傳圖片大小不能超過 2MB!');
        return false;
      }

      /* 打開圖片裁剪對話框 */
    }
  }
}
</script>

壓縮代碼示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="false"
    :before-upload="handleBeforeUpload"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">選取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>


export default {
  methods: {
    handleBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上傳圖片只能是 JPG/PNG/GIF 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上傳圖片大小不能超過 2MB!');
        return false;
      }

      /* 使用canvas將圖片進行壓縮 */
    }
  }
}
</script>

四、圖片上傳進度顯示

在上傳大文件的過程中，為了讓用戶知道上傳的進度，el-upload提供了上傳進度的顯示功能。可以通過配置屬性show-progress來實現。

代碼示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-progress="true"
    :show-file-list="false"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">選取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>

五、圖片預覽和刪除

el-upload還提供了預覽和刪除已上傳圖片的功能。只需要在屬性show-file-list設置為true，就可以在上傳組件下方顯示已上傳的圖片列表，同時提供了預覽和刪除按鈕。

代碼示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="true"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">選取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>

六、總結

本文從el-upload的圖片回顯基礎、圖片單選和多選、圖片裁剪和壓縮、圖片上傳進度顯示和圖片預覽和刪除五個方面詳細介紹了el-upload圖片回顯的相關知識。希望本文能夠對讀者有所幫助，使讀者在開發中更好地應用el-upload組件。