如何在客户端使用“文件类型”NPM 模块？

终于得到了这个工作。万一其他人被困在这个问题上，这里有一个解释（为缺乏简洁而道歉 - 可能这应该是一篇博客文章......）。

为了进一步充实用例，我使用Uppy来允许用户将文件上传到 AWS S3 存储桶。它的工作方式是，当用户上传文件时，Uppy 会调用我的服务器，在那里生成 AWS 预签名 URL 并将其传递回客户端。然后，客户端使用该预签名 URL 将文件直接上传到 S3 存储桶，绕过服务器，这样文件在任何时候都不会通过服务器。

我试图解决的问题是缺少扩展名的文件最终上传的内容/MIME 类型设置为“应用程序/八位字节”，因为浏览器、Uppy 和 S3 似乎都依赖文件扩展名来决定文件类型（而不是解析文件的所谓“魔术字节”），如果缺少文件扩展名，AWS 默认为“application/octet”。当用户尝试打开文件时，这会导致问题，因为它们没有得到正确处理（即没有扩展名且具有“应用程序/八位字节”内容/MIME 类型的 png 文件打开下载对话框而不是被预览等）。我还想在扩展名存在的情况下验证 MIME 类型/文件类型，以便我可以排除某些类型的文件，

我使用“文件类型”NPM 模块来确定 mimetype 服务器端，这很简单，但是在生成 AWS 预签名 URL 时更改文件的内容类型/MIME 类型不足以解决问题 - 它仍然被上传为“应用程序/八位字节”。我想使用相同的模块客户端，因此我们在客户端上获得与在服务器上完全相同的结果，并且在任何情况下都需要确定 MIME 类型并相应地设置它在上传前但预签名后的 URL。我不知道如何做到这一点（即使用“文件类型”客户端 - 我的问题的核心）。

我终于放弃了 Webpack - 我尝试过的一切都不奏效。所以我切换到 Browserify，“文件类型”存储库中的示例浏览器代码立即生效！因此，我不得不试图弄清楚如何通过 Browserify 传递一个函数以在客户端代码中使用。

这对我来说是不可能的 - 我不知道如何将异步 IIFE 传递给我的代码。因此，我将我的 Uppy 代码移动到我传递给 Browserify 的代码中：

// Get the dependency, which we've added to node via "npm install file-type":
const FileType = require('file-type/browser');

// When the user adds a file for upload to Uppy...
uppy.on('file-added', (file) => {
    
    // 1. Create a filereader:
    const filereader = new FileReader();
    
    filereader.onloadend = function(evt) {
        
        // 4. Once the filereader has successfully finished reading the file...
        if (evt.target.readyState === FileReader.DONE) {
            
            // Get the unsigned 8 bit int8Array (ie Uint8Array) of the 600 bytes (this looks like '[119,80,78,71...]'):
            const uint = new Uint8Array(evt.target.result);
       
            // Determine the mime type using the "file-type" NPM package:
            (async () => {
                
                // Pass in our 600 bytes ("uint"):
                const fileType = await FileType.fromBuffer(uint);
            
                console.log(fileType); // outputs => {ext: 'jpg', mime: 'image/jpeg'}
                
                // Do some validation here...
                
                //
                
                //  Assign the results to the file for upload - we're done!:
                file.extension = fileType.ext;
                file.meta.type = fileType.mime;
                file.type = fileType.mime;
            })();
        }
    }
    
    // 2. Grab the first 600 bytes of the file for mime type analysis server side - most mime
    // types use the first few bytes, but some (looking at you, Microsoft...) start at the 
    // 513th byte; ISO CD files start at the 32,770th byte, so we'll ignore those rather than 
    // send that much data for each file - users of this system certainly aren't expected to 
    // upload ISO CD files! Also, some .zip files may start their identifying bytes at the 
    // 29,153nd byte - we ignore those too (mostly, .zip files start at the first, 31st, or 527th byte).
    const blob = file.data.slice(0, 600);        
    
    // 3. Start reading those 600 bytes...continues above at 'filereader.onloadend':
    filereader.readAsArrayBuffer(blob);
})

这一切都进入了一个我称之为“index.js”的文件，然后，通过“npm install -g browserify”在命令行安装了 Browserify，我在命令行中使用它来创建文件（“main.js”）我在客户端代码中链接到：

browserify index.js -o main.js