快捷導(dǎo)航

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

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

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

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

首先：創(chuàng)建一個(gè)文件夾在components目錄下創(chuàng)建一個(gè)為UploadImage的文件夾，UploadImage文件夾下創(chuàng)建個(gè)文件我這里用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);可以直接拿到圖片路徑。由于圖片是上傳到我的服務(wù)器了所以拿過來的路徑直接就是網(wǎng)絡(luò)路徑。

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

您可能感興趣的文章: