vue如何封装一个上传多张图片的组件

上传图片不管是后台还是前端小程序，上传图片都是一个比不可少的功能有时候需要好几个页面都要上传图片，每个页面都写一个非常不方便，这时候就没有封装起来用的方便。跟上我的步伐带你了解如何封装

 首先：创建一个文件夹在components目录下创建一个为UploadImage的文件夹，UploadImage文件夹下创建个文件我这里用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'; //引入创建的组件
const avatar = ref(``); //'/uploads/...png,/uploads/...jpg'
 
console.log(avatar);
</script>

打印console.log(avatar);可以直接拿到图片路径。由于图片是上传到我的服务器了所以拿过来的路径直接就是网络路径。