詳解vue如何封裝封裝一個上傳多張圖片的組件

更新時間：2023年07月02日 09:37:09 作者：冰海戀雨.

上傳圖片不管是后臺還是前端小程序，上傳圖片都是一個比不可少的功能有時候需要好幾個頁面都要上傳圖片，每個頁面都寫一個非常不方便，本文就給大家介紹vue如何封裝一個上傳多張圖片的組件,需要的朋友可以參考下

上傳圖片不管是后臺還是前端小程序，上傳圖片都是一個比不可少的功能有時候需要好幾個頁面都要上傳圖片，每個頁面都寫一個非常不方便，這時候就沒有封裝起來用的方便。跟上我的步伐帶你了解如何封裝

首先：創(chuàng)建一個文件夾在components目錄下創(chuàng)建一個為UploadImage的文件夾，UploadImage文件夾下創(chuàng)建個文件我這里用index命名了。

在UploadImage的index文件中：

<template>
  <el-upload
    v-model:file-list="upload.fileList"
    :action="upload.action"
    list-type="picture-card"
    :before-upload="upload.before"
    :on-success="upload.success"
    :on-preview="upload.proview"
    :data-fileListCount="upload.fileList.length"
    :name="upload.name"
    :on-remove="upload.remove"
    :limit="upload.limit"
    :on-exceed="upload.exceed"
    class="UploadFile"
    data-cardSize="75px"
  >
    <el-icon>
      <Plus />
    </el-icon>
  </el-upload>
  <el-image-viewer
    :url-list="upload.fileList.map((item) => item.url)"
    v-if="upload.dialogVisible"
    :initial-index="upload.index"
    @close="upload.dialogVisible = false"
    teleported
  />
</template>
  <script setup>
import { reactive, watch } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
const props = defineProps({
  imageList: String,
  baseUrl: String,
  limit: Number,
});
const { baseUrl } = { baseUrl: `http://sk.yyds.blue` } || {
  baseUrl: props.baseUrl,
};
watch(
  () => props.imageList,
  (imageList) => {
    upload.fileList = imageList
      ? imageList.split(`,`).map((item) => {
          return {
            url: baseUrl + item,
          };
        })
      : [];
    console.log(upload.fileList);
  }
);
const emit = defineEmits(['getImageUrl']);
const upload = reactive({
  limit: props.limit || 4,
  name: 'file',
  action: '/api/common/upload',
  fileList: props.imageList
    ? props.imageList.split(`,`).map((item) => {
        return {
          url: baseUrl + item,
        };
      })
    : [],
  dialogVisible: false,
  index: 0,
  exceed: () => {
    ElMessage({ type: 'warning', message: `最多上傳${upload.limit}張圖片` });
  },
  before: (file) => {
    const type = ['image/png', 'image/jpeg', 'image/gif'];
    if (!type.includes(file.type)) {
      ElMessage.error('不支持該類型文件');
      return false;
    }
  },
  proview: (file) => {
    const { url } = file;
    upload.index = upload.fileList.findIndex((item) => item.url === url);
    upload.dialogVisible = true;
  },
  success: (res, uploadFile, uploadFiles) => {
    // console.log(uploadFiles);
    let imageList = uploadFiles
      .map((item) => {
        return {
          url:
            item.response && item.status === `success`
              ? item.response.data.url
              : item.url.split(baseUrl)[1],
        };
      })
      .map((item) => item.url)
      .join(',');
    emit('getImageUrl', imageList);
    ElMessage({ type: res.code === 1 ? `success` : 'warning', message: res.msg });
  },
  remove: (file, files) => {
    console.log(files);
    let imageList = files
      .map((item) => {
        return {
          url:
            item.response && item.status === `success`
              ? item.response.data.url
              : item.url.split(baseUrl)[1],
        };
      })
      .map((item) => item.url)
      .join(',');
    emit('getImageUrl', imageList);
  },
  handleClickPreview: () => {
    console.log(1);
  },
});
</script>
  <style lang="scss">
// [data-fileListCount='5'] {
//   .el-upload--picture-card {
//     display: none !important;
//   }
// }
.UploadFile {
  display: flex;
  align-items: center;
  .el-upload-list--picture-card {
    // --el-upload-list-picture-card-size: 70px !important;
    .el-upload-list__item {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  .el-upload--picture-card {
    // --el-upload-picture-card-size: 70px !important;
  }
  .el-upload-dragger {
    height: 100%;
    display: grid;
    place-content: center;
  }
}
</style>

需要上傳圖片的頁面：

 
<template>
  <div class="name_inpasd"
    ><b>商品輪播：</b>
    <div class="asdasd">
      <UploadImage
        @getImageUrl="
          (fileList) => {
            avatar = fileList;
          }
        "
        :limit="2"
        :imageList="avatar"
      />
    </div>
  </div>
</template>
<script setup>
import UploadImage from '../../components/UploadImage/index.vue'; //引入創(chuàng)建的組件
const avatar = ref(``); //'/uploads/...png,/uploads/...jpg'
console.log(avatar);
</script>

打印console.log(avatar);可以直接拿到圖片路徑。由于圖片是上傳到我的服務器了所以拿過來的路徑直接就是網絡路徑。

到此這篇關于詳解vue如何封裝封裝一個上傳多張圖片的組件的文章就介紹到這了,更多相關vue封裝上傳圖片組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: