博客

vue3使用el-upload上传文件示例详解

  • Post category:http

下面是关于“Vue3使用el-upload上传文件示例详解”的完整攻略。

什么是el-upload组件？

el-upload 是 element-ui 中的一款文件上传组件，可以快速方便的上传文件、图片等。它在上传文件时，提供了上传前检查、上传进度、上传成功等各种状态的显示，让用户可以清晰地了解上传文件的整个过程。

Vue3如何使用el-upload上传文件？

在使用el-upload上传文件前，需要先安装相关的组件。这里我们需要安装 element-plus 和 axios 两个库。具体代码如下：

npm i element-plus axios

安装完成后，我们就可以开始使用 el-upload 上传文件。下面是示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :headers="{ 'Authorization': token }"
      :data="{ directory: directory }"
      :multiple="false"
    >
      <el-button size="small" type="primary">{{ uploadText }}</el-button>
    </el-upload>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { ElUpload, ElButton } from 'element-plus';
import axios from 'axios';

export default defineComponent({
  components: {
    ElUpload,
    ElButton,
  },
  setup() {
    const uploadUrl = ref('/upload');
    const directory = ref('/image');
    const uploadText = ref('上传图片');
    const token = ref('Bearer ' + localStorage.getItem('token'));

    const handleSuccess = (res, file) => {
      console.log(res, file);
    };

    return {
      uploadUrl,
      directory,
      uploadText,
      token,
      handleSuccess,
    };
  },
});
</script>

上述代码中，我们通过 import 引入了 el-upload、el-button、axios 等组件，并在 template 中使用 el-upload 标签，将上传图片的按钮渲染出来。

其中，:action 属性是必须配置的，定义了文件上传后台的访问地址。:on-success 是在文件上传成功后的回调函数，这里我们只是简单的输出一下响应结果。:headers 是设置请求头的配置，这里我们设置了一个 token 来限制上传的文件权限。

el-upload如何限制上传文件格式和大小？

为了保证上传文件的格式和大小符合我们的需求，我们需要对 el-upload 组件进行一些额外的配置。

限制上传文件格式

el-upload 组件提供了 :before-upload 属性，可以在上传前进行文件格式检查。下面是一个简单的示例：

<el-upload
  class="upload-demo"
  :action="uploadUrl"
  :accept="accept"
  :before-upload="beforeUpload"
>
  <el-button size="small">{{ uploadText }}</el-button>
</el-upload>

<script>
import { defineComponent, ref } from 'vue';
import { ElUpload, ElButton } from 'element-plus';
import axios from 'axios';

export default defineComponent({
  components: {
    ElUpload,
    ElButton,
  },
  setup() {
    const uploadUrl = ref('/upload');
    const uploadText = ref('上传图片');
    const accept = ref('.jpg,.jpeg,.png,.gif');

    const beforeUpload = (file) => {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isValid = isJPG || isPNG || isGIF;

      if (!isValid) {
        this.$message.error('上传图片只能是 jpg、jpeg、png、gif 格式!');
        return false;
      }
    };

    return {
      uploadUrl,
      uploadText,
      accept,
      beforeUpload,
    }
  },
});
</script>

上述代码中，我们通过 :accept 属性设置上传文件类型，并在 beforeUpload 函数中判断每个文件的上传格式是否符合设定的格式要求。如果不符合，我们就打印错误信息并返回 false 停止上传。

限制上传文件大小

和限制上传文件格式相同，我们也可以通过 :before-upload 属性限制上传文件的大小。下面是一个示例：

<el-upload
  class="upload-demo"
  :action="uploadUrl"
  :before-upload="beforeUpload"
>
  <el-button size="small">{{ uploadText }}</el-button>
</el-upload>

<script>
import { defineComponent, ref } from 'vue';
import { ElUpload, ElButton } from 'element-plus';
import axios from 'axios';

export default defineComponent({
  components: {
    ElUpload,
    ElButton,
  },
  setup() {
    const uploadUrl = ref('/upload');
    const uploadText = ref('上传文件')

    const beforeUpload = (file) => {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!');
        return false;
      }
    }

    return {
      uploadUrl,
      uploadText,
      beforeUpload
    }
  }
})
</script>

在上述代码中，我们通过计算 file.size，判断上传文件大小是否小于 2MB，如果不符合就返回 false 并打印错误信息。

至此，我们完成了el-upload上传文件的详细讲解，包括了组件的基本使用和上传文件格式、大小的限制。希望对您有所帮助。

Tags: