vue3上传组件——完整版功能（含接口）

最新推荐文章于 2024-09-25 23:58:00 发布

viceen

最新推荐文章于 2024-09-25 23:58:00 发布

阅读量2.2k

点赞数

分类专栏： vue3+ts-运维文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/121615809

版权

vue3+ts-运维专栏收录该内容

87 篇文章 11 订阅

订阅专栏

该博客介绍了如何使用Vue3和Element Plus组件库创建一个PDF文件上传组件。通过限制上传文件类型、数量，并实现文件删除、上传前验证、超出数量提示及上传成功回调等功能，确保了上传过程的可控性和用户体验。

摘要由CSDN通过智能技术生成

vue3上传组件——完整版功能（含接口）

1、效果

在这里插入图片描述

2、代码

<script lang="ts" setup>
import titleHeader from '../header/titleHeader.vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import img from '@/assets/yfdd-bs/right/zbyq/fb.png'
const fileList = ref<Array<{name: string}>>([])

/**
 * 删除文件
 */
const handleDelFile = () => {
  fileList.value = []
}

/**
 * 上传之前触发
 */
const beforeUpload = (file: any) => {
  // 判断文件类型
  const index = file.name.lastIndexOf('.')
  const type = file.name.substring(index + 1).toLocaleLowerCase()
  const hasType = ['pdf'].some(res => {
    return res === type
  })
  if (!hasType) {
    ElMessage.warning('文件类型不正确')
    return false
  }
}

const handleExceed = () => {
  ElMessage.info('只能上传一个哦')
  return false
}

const handleSuccess = (response: any) => {
  const { data } = response
  console.log(data)
}
</script>

<template>
  <div class="duty-container">
    <titleHeader
      :src="img"
      :need-line="true"
      :line-width="[170, 24]"
    />

    <div class="content">
      123
      <!--参数：
            action	必选参数，上传的接口地址;
			limit	允许上传的最大数量;
			file-list	上传的文件列表;
			before-upload  上传前的方法；
			on-remove	文件列表移除文件时的方法；
			on-exceed	文件超出个数限制时的方法；
			on-success	文件上传成功时的钩子（方法）

-->
      <el-upload
        class="upload-demo"
        action="http://130.25.94.8:8487/common/file/upload"
        :limit="1"
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-remove="handleDelFile"
        :on-exceed="handleExceed"
        :on-success="handleSuccess"
      >
        <el-button
          size="small"
          type="primary"
        >
          点击上传,只能上传pdf格式
        </el-button>
      </el-upload>
    </div>
  </div>
</template>

<style scoped lang="scss">
.duty-container {
  grid-area: a;
  background: url(@/assets/yfdd-bs/right/zbyq/back2.png) no-repeat;
  background-size: 100% 100%;
  .content {
    margin-top: -10px;
    height: calc(100% - 100px);
    padding: 0px 30px;

  }
}
</style>