如何在Vue 3中使用文件类型？

Question

为了使用文件类型不仅确定扩展名，而且确保标题正确，我需要使用其 GitHub 页面 上列出的方法之一。在版本 19.0.0 中，它说 fileFromFileType 没有这样的导出，在 16.5.4 中，它说它不是一个有效的函数。

这是我需要它的页面，但您也可以查看存储库这里

<template>
  <div style="font: 13px Verdana; background: #eee; color: #333; margin: 2px; padding: 20px;">
    <h1>Upload een foto</h1>

    <div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
    <br />

    <div id="container">
      <a id="pickfiles" href="javascript:;">[Select files]</a> 
      <a id="uploadfiles" href="javascript:;" @click="checkValidFile">[Upload files]</a>
    </div>
    <br />

    <pre id="console">{{ errorMessage }}</pre>
  </div>
</template>

<script>
import plupload from 'plupload';
import * as fileType from 'file-type';
export default {
  data() {
    return {
      uploader: null,
      errorMessage: ''
    }
  },
  mounted() {
    this.uploader = new plupload.Uploader({
      runtimes : 'html5,flash,silverlight,html4',
      browse_button : 'pickfiles',
      container: document.getElementById('container'),
      url : 'https://localhost:7104/api/PlUpload/File', 
      flash_swf_url : '../js/Moxie.swf',
      silverlight_xap_url : '../js/Moxie.xap',
      chunk_size:'5mb',
      max_retries: 100,

      filters : {
        max_file_size : '5gb',
        mime_types: [
          {title : "Image files", extensions : "jpg,jpeg,gif,png"},
          {title : "Movies", extensions : "mp4"}
        ]
      },

      init: {
      PostInit: () => {
        document.getElementById('filelist').innerHTML = '';
      },

      FilesAdded: (up, files) => {
        files.forEach(file => {
          document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
        });
      },

      UploadProgress: (up, file) => {
        document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        if (file.percent === 100) {
          this.errorMessage = '';
        }
      },

      ChunkUploaded: (up, file) => {
        const delayBetweenChunks = 15; 
        setTimeout(() => {
          up.trigger('UploadProgress', file);
          up.trigger('BeforeUploadChunk', file);
        }, delayBetweenChunks);
      },

      Error: (up, err) => {
        if (err.code === plupload.HTTP_ERROR && err.status === 0) {
          this.errorMessage = 'Netwerkfout, verbind opnieuw met uw internet zodat de upload weer start.';
        } else {
          this.errorMessage = 'Error';
        }
      },  
    },
      
    });

    this.uploader.init();
  },
  methods: {
    selectFiles() {
      this.uploader.start();
    },

    generateUniqueIdentifier() {
      const timestamp = Date.now();
      const randomString = Math.random().toString(36).substring(2, 15);
      return `${timestamp}-${randomString}`;
    },

    uploadFiles() {
      this.uploader.start();
    },

    async checkValidFile() {
      if (!this.uploader.files.length) {
        console.error('Geen bestand geselecteerd.');
        return;
      }

      for(let i = 0; i< this.uploader.files.length; i++){
        let file = this.uploader.files[i];
        console.log(await fileType.fileTypeFromFile(file));
      }

    },
    
  }
}
</script>

Answer 1

我认为

fileTypeFromFile

功能在浏览器环境中不可用。我认为它仅在

node

环境中可用。

我看到您在浏览器环境中使用该库，因此我建议您使用其他功能，例如

fileTypeFromStream

，

fileTypeFromBuffer

或

fileTypeFromBlob

例如：

console.log(await fileType.fileTypeFromBuffer(file));

和

console.log(await fileType.fileTypeFromBuffer(file));

您可以在浏览器环境中看到文件型包导出的所有可能的功能在这里