快捷導航

element plus中el-upload實現(xiàn)上傳多張圖片的示例代碼

更新時間：2024年01月10日 15:26:26 作者：天外天-亮

最近寫項目的時候需要一次上傳多張圖片,本文主要介紹了element plus中el-upload實現(xiàn)上傳多張圖片的示例代碼,具有一定的參考價值,感興趣的可以了解一下

element中圖片上傳的一些要點

1、想要實現(xiàn)多圖片上傳一定要標注multiple屬性、而且一定要是自己手動實現(xiàn)上傳功能、這里有兩個方法：

（1）通過配置file-list,即獲取file-list中上傳的文件然后封裝到FormData()中，最后調(diào)用axios傳遞formData數(shù)據(jù)到后臺

（2）重寫http-request="uploadFile"方法，重寫了這個方法后調(diào)用’this.$refs.upload.submit()，就會自動調(diào)用你重寫的http-request=""方法，它會根據(jù)你上傳的圖片個數(shù)循環(huán)調(diào)用多少次。如你上傳了兩張，調(diào)用’this.$refs.upload.submit()后內(nèi)部會自動調(diào)用兩次http-request=""方法。這樣我們在http-request=""方法中設(shè)置this.fileList.append(‘file’, item.file)就能將文件封裝進一個list中，然后再封裝進formData。最后調(diào)用axios即可。

注意: 上面兩種方法，使用方式是一樣的，都是自己封裝好一個FormData,然后調(diào)用axios，而且axios傳遞數(shù)據(jù)一定是data:yourData樣式的，千萬不要自討苦吃這樣寫query:youData

2、element圖片組件是默認上傳的，添加屬性auto-upload="false"后才能關(guān)閉。也只有關(guān)閉了自動提交后、才能實現(xiàn)手動提交

3、element圖片組件自動上傳如果沒有手動封裝FormData數(shù)據(jù)然后調(diào)用axios，即使添加了multiple屬性可以上傳多個,element圖片組件只會是一個圖片發(fā)送一個請求的，而并非是一個請求多個圖片

4、調(diào)用this.$refs.upload.submit(),element圖片組件會使用默認的上傳方式上傳文件如果重寫了http-reques方法，那么久會調(diào)用http-reques方法,默認上傳和’this.$refs.upload.submit()'請求url都是element圖片組件上綁定的action，只有自己調(diào)用axios才不會使用到這個action

5、如果想要一個請求上傳多個圖片并附帶參數(shù)、只能使用formData.append("你的屬性名"，屬性值)的方式，使用formData.append("實體類名",this.form)是無法成功傳數(shù)據(jù)的

6、關(guān)閉自動上傳后調(diào)用this.$refs.upload.submit()才能生效，默認上傳請求url都會是element圖片組件上綁定的action，自動上傳都是自己調(diào)用axios上傳的

實現(xiàn)自定義下載、刪除、查看

在這里插入圖片描述

<template>
  <el-dialog :close-on-click-modal="false" :model-value="dialogVisibleBox" :before-close="handleCloseUploadImg">
    <el-upload
        ref="uploadRef"
        v-model:file-list="fileList"
        list-type="picture-card"
        :on-change="onChangeFun"
        :auto-upload="false"
        action="#">
      <el-icon>
        <Plus/>
      </el-icon>
      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
            >
              <el-icon><zoom-in /></el-icon>
            </span>
            <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
            >
              <el-icon><Download /></el-icon>
            </span>
            <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemoveFun(file)"
            >
              <el-icon><Delete /></el-icon>
            </span>
          </span>
        </div>
      </template>
    </el-upload>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCloseUploadImg">取消</el-button>
        <el-button type="primary" @click="saveData">
          確認
        </el-button>
      </span>
    </template>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image"/>
    </el-dialog>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, toRefs, watch } from 'vue';
import {ElNotification, UploadProps, UploadUserFile} from 'element-plus';
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue';
const props = defineProps({
  dialogVisibleBox: Boolean
});
let {dialogVisibleBox} = toRefs(props);
const uploadRef: any = ref();
let fileList: any = reactive<UploadUserFile[]>([
  // {
  //   : 'food.jpeg',
  //   url: '../../../assets/image/order/blue_light_2.png',
  // }
]);
const saveImgList: any = {};
const dialogImageUrl = ref('');
let disabled = ref(false);
const dialogVisible = ref(false);
let saveUploadImgNum: number = 0;

const onChangeFun = (rawFile: any) => {
  if (rawFile.status !== "ready") return;
  const maxSize = 30;
  const imgSize = rawFile.size / 1024 / 1024 < maxSize;
  const imgType = ['image/png', 'image/jpg', 'image/jpeg'].includes(rawFile.raw.type);
  if (!imgType)
    ElNotification({
      title: '溫馨提示',
      message: '請上傳png、jpg、jpeg文件格式的圖片！',
      type: 'warning',
    });
  if (!imgSize)
    ElNotification({
      title: '溫馨提示',
      message: `上傳圖片大小不能超過 ${maxSize}M！`,
      type: 'warning',
    });
  if (imgType && imgSize) {
    saveUploadImgNum++;
  }
};
// 傳遞關(guān)閉事件
const emit = defineEmits(['handleCloseUploadImg']);
const handleCloseUploadImg = () => {
  // 清空upload列表
  uploadRef.value.clearFiles();
  emit("handleCloseUploadImg");
};
const handleRemoveFun= async (file: any) => {
  // 這里可以先處理后端刪除 前端再刪除
  const index = fileList.indexOf(file);
  if (index !== -1) { // 確保文件存在于文件列表中
     saveUploadImgNum--;
     fileList.splice(index, 1); // 從文件列表中刪除文件
   }
}

const handlePictureCardPreview = (file: any) => {
  // 方法查看
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
}

const handleDownload = (file: any) => {
  // 下載
  const link: any = document.createElement('a');
  link.download = file.name;
  link.href = file.url;
  link.click();
  window.URL.revokeObjectURL(link.href);
}
</script>

到此這篇關(guān)于element plus中el-upload實現(xiàn)上傳多張圖片的示例代碼的文章就介紹到這了,更多相關(guān)element el-upload上傳多張圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: