当前位置：首页 > article >正文

element plus上传文件点击确认后文件上传到接口

article 2024/9/25 21:19:49

下面是一个使用 Element Plus 的示例代码，展示了如何实现上传 .xlsx 和 .xls 文件的功能，并在上传后打印文件名和上传状态，同时通过接口将文件以流的形式上传。

安装 Element Plus

首先，确保你已经安装了 Element Plus。可以使用以下命令安装：

npm install element-plus

组件代码示例

<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      action=""
      :on-change="handleChange"
      :before-upload="beforeUpload"
      multiple
      :file-list="fileList"
      :show-file-list="false"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只支持.xlsx和.xls文件</div>
    </el-upload>

    <el-button type="primary" @click="submitFiles">确认上传</el-button>

    <div v-if="uploadStatus">
      <p>文件名: {{ uploadedFileName }}</p>
      <p>上传状态: {{ uploadStatus }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const fileList = ref([])
    const uploadedFileName = ref('')
    const uploadStatus = ref('')

    const handleChange = (file, fileList) => {
      if (file.status === 'ready') {
        uploadedFileName.value = file.name
      }
    }

    const beforeUpload = (file) => {
      const isExcel =
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        file.type === 'application/vnd.ms-excel'
      if (!isExcel) {
        this.$message.error('上传文件只能是 .xlsx 或 .xls 格式!')
      }
      return isExcel
    }

    const submitFiles = async () => {
      if (fileList.value.length === 0) {
        this.$message.warning('请先选择文件！')
        return
      }

      const formData = new FormData()
      fileList.value.forEach(file => {
        formData.append('files', file.raw) // 将文件添加到 FormData
      })

      try {
        const response = await axios.post('YOUR_API_ENDPOINT', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        })
        uploadStatus.value = response.data.success ? '上传成功' : '上传失败'
      } catch (error) {
        uploadStatus.value = '上传发生错误'
        console.error(error)
      }
    }

    return {
      fileList,
      uploadedFileName,
      uploadStatus,
      handleChange,
      beforeUpload,
      submitFiles,
    }
  },
}
</script>

<style>
.upload-demo {
  margin: 20px 0;
}
</style>