2 22.封装上传多图组件功能实现

• 上传API

export const   uploadImageAction = "/api/admin/image/upload"

• 封装多图上传组件

<template>
    <el-upload
        class="upload-demo"
        drag
        :action="uploadImageAction"
        multiple
        :headers="{
          token
        }"
        name="img"
        :data="data"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>

      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>

      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </el-upload>
</template>

<script setup>
import { uploadImageAction } from "~/api/image"
import { getToken } from "../composables/auth"
import { toast } from '~/composables/util'

const token = getToken()
const emit = defineEmits(['success'])

const uploadSuccess =(response, uploadFile, uploadFiles)=>{
  toast('上传成功')
  emit('success',{
    response, uploadFile, uploadFiles
  })
}

const uploadError =(error, uploadFile, uploadFiles)=>{
  let msg = JSON.parse(error.message).msg || "上传失败"
  toast(msg,"error")
}


defineProps({
  data: Object,
})
</script>

• 上传调用

image_class_id 是图片类别ID

<!-- 上传图片抽屉 -->
<el-drawer title="上传图片" v-model="drawer">
    <UploadFile :data="{ image_class_id }" @success="handleUploadSuccess"/>
</el-drawer>

import  UploadFile  from './UploadFile.vue';
// 上传图片,并重新刷新
const handleUploadSuccess = ()=>getData(1)