Web前端input上传文件(type=“file“)

Html前端代码

 <div class="openBox">
          <p v-if="resourceArr.length">文件名:{{resourceArr[0].name}}</p>
          <div class="changeFile" @click="$refs['file'].click()">选择文件</div>
          <input type="file" ref="file" style="display:none" @change="fileSelect" :key="fileKey">
        </div>

JS前端代码

  fileSelect(e) {
      const vm = this;
      const files = this.$refs["file"]?.files;
      if (files) {
        files.forEach((file) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            if (vm.checked(file)) {
              vm.resourceArr[0] = {
                id: file.lastModified,
                name: file.name,
                size: file.size,
                type: "file", //or url default:url
                url: reader.result,
                data: file,
              };
              vm.fileKey = Math.random();
            }
            vm.fileKey = Math.random();
          };
          reader.onerror = () => {
            vm.$error(`获取文件失败`);
          };
        });
      } else {
        vm.$error(`获取文件失败`);
      }
    },
 /**
     * 简单文件校验
     */
    checked({ size, type }) {
      const vm = this;
      //单张文件大小校验
      if (size > vm.byteSize) {
        vm.$message({
          type: "warning",
          message: `单张上传不能超过${vm.size}M`,
        });
        return false;
      }
      //文件类型校验
      // if (!(new RegExp(vm.type.replace(/\W/g, '|')).test(type.toLowerCase()))) {
      //   vm.$message({
      //     type: 'warning',
      //     message: `上传文件仅支持${vm.type}类型`
      //   })
      //   return false
      // }
      return true;
    },