DIY文件上传（修改原始input:file）

原创已于 2023-08-01 23:14:34 修改 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #vue

于 2023-08-01 20:34:08 首次发布

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

17 篇文章

订阅专栏

本文介绍了如何使用Vue.js创建一个可定制样式的文件上传功能，包括隐藏的`<inputtype=file>`元素，点击按钮触发上传事件，以及文件格式和大小的验证。

隐藏 input:file ，在页面创建 button 和 span 用于展示文件上传按钮和文件上传文本，在点击 button 时调用 input:file 的点击上传事件触发文件上传。

创建的 button 和 span 即可进行自定义样式

代码

<template>
  <div id="app">
    <input type="file" ref="inputfile" @change="fileChange" />
    <button @click="fileClick">选择上传文件</button>
    <span>{{ text }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "请选择要上传的文件",
    };
  },
  methods: {
    // button 点击触发 input:file 点击
    fileClick() {
      this.$refs.inputfile.click();
    },
    // input:file 文件上传
    fileChange(res) {
      const file = res.target.files[0];  //  获取上传文件

      const fileType = ["jpg", "png"];  // 要求文件格式
      const fileSize = 2;  // 要求文件大小

      const { name } = file;
      const nameSplit = name.split(".");  // 获取上传文件后缀名
      const suffix = nameSplit[nameSplit.length - 1].toLocaleLowerCase();
      if (!fileType.includes(suffix)) {
        alert(`文件类型应为${fileType.join("、")}`);
        return;
      }

      const { size } = file;
      const isLimitSize = size / 1024 / 1024 < fileSize;  //  判断上传文件大小
      if (!isLimitSize) {
        alert(`文件大小应小于${fileSize}M`);
        return;
      }

      this.text = file.name;
      console.log("取得上传的文件", size / 1024 / 1024, file);
    },
  },
};
</script>

<style>
input {
  display: none;
}
button {
  width: 100px;
  height: 40px;
  border-radius: 10px;
  background: pink;
}
span {
  margin-left: 20px;
  font-style: italic;
  color: red;
}
</style>