Question

我已经使用Yii2框架和ReactJs在reactJs中成功实现了文件上传。但我会喜欢在上传之前验证文件的文件类型。我来了https://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/，我尝试将其实现为

<FilePond
    ref={ref => this.pond = ref}
    files={this.state.coverfiles}
    acceptedFileTypes={['images/*']}
    fileValidateTypeDetectType={(source, type) => new Promise((resolve, reject) => {

        resolve(type);
     })
    }
    onupdatefiles={(fileItems) => {
          // Set current file objects to this.state
          this.setState({
              coverfiles: fileItems.map(fileItem => fileItem.file)
          });
      }}
    required={true} 
    name={'coverfiles'} 
    //instantUpload={this.state.sumitted}
    allowImageCrop={true}
    allowMultiple={false} 
    processFile={false}

    labelIdle={'Drag and Drop your Cover Add Picture or <span class="filepond--label-action"> Browse </span>'}

    >
</FilePond>

对于图像，音频文件和视频文件，我将需要在不同情况下执行此操作。

，我不知道如何在这里解析特定的文件类型。我已经安装了插件，对此有任何帮助。

Answer 1

根据文档，浏览器提供了文件的mime类型，因此您所要做的就是允许图像/音频和视频类型如下：

acceptedFileTypes={['image/*', 'audio/*', 'video/*']}

仅当浏览器在检测哑剧类型时出错时，才需要fileValidateTypeDetectType函数。在这种情况下，您resolve的类型正确（或致电reject(reason)取消。

Answer 2

我没有尝试使用文件类型验证插件，但是我知道如果在FilePond上设置 server 属性并覆盖，则可以进行常规的预上传验证处理功能。由于File对象作为该函数的参数公开，因此您可以查询file.type以获取MIME类型作为字符串并拒绝。

为了与我的API兼容，我需要对其进行其他一些清理，以使其成为我进行所有上传前验证（文件大小，名称重复等）的自然位置。

在实践中大致是这样的：

<FilePond
    allowMultiple
    server={
             {  process: (fieldName, file, metadata, load, error, progress, abort) => {
                    if (file.type.includes('image')) {
                        error(new Error('Invalid file type'));
                    } else {
                        load(file.name);
                    }
                }
             }
           }
/>

有关此文档，请参见：https://pqina.nl/filepond/docs/patterns/api/server/#introduction

此外，file.type验证也不是确定文件类型的理想方法，因为它不读取字节流，仅根据扩展名进行解析。在此处查看有关使用File.type的MDN建议：https://developer.mozilla.org/en-US/docs/Web/API/File/type

希望有帮助！

使用Filepond

2 个答案: