React Dropzone无法接受某些文件类型

时间:2019-09-12 07:48:33

标签: reactjs react-dropzone

在我的create-react-app App.js中,我拥有这些文件类型,这些文件类型总是被拒绝。

xls - application/x-msi
pptm - application/vnd.openxmlformats-officedocument.presentationml.presentation
pptx - application/vnd.openxmlformats-officedocument.presentationml.presentation
xlsm - application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
rtf - application/rtf

Full code

import React, {useCallback} from 'react';
import {useDropzone} from 'react-dropzone';

const docUploadConfig = {
  fileTypes: [
    'application/pdf',
    'application/msword',
    'application/vnd.ms-word.document.macroEnabled.12',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'application/vnd.ms-excel',
    'application/vnd.ms-excel.sheet.macroEnabled.12',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

    // excel
    'application/vnd.ms-excel',
    'application/vnd.ms-excel.sheet.macroEnabled.12',
    'application/msexcel',
    'application/x-msexcel',
    'application/x-ms-excel',
    'application/x-excel',
    'application/x-dos_ms_excel',
    'application/xls',
    'application/x-xls',
    'application/x-msi',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

    'application/vnd.ms-powerpoint',
    'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
    'application/vnd.openxmlformats-officedocument.presentationml.presentation',
    'text/plain',
    'text/xml',

    'application/xml',

    'text/html',
    'application/rtf',
    'text/csv',
    'image/tiff',
    'image/jpeg',
    'image/png',
    'image/gif',
    'image/bmp',
    'application/x-afp',
    'application/vnd.ibm.modcap'
  ],
  minSize: 0,
  maxSize: 2097152,
  isMultipleFiles: false
};

function MyDropzone() {
  const onDrop = useCallback((acceptedFiles, rejectedFiles) => {
    // Do something with the files

    console.log('accept', acceptedFiles);
    console.log('reject', rejectedFiles);
  }, []);
  const {getRootProps, getInputProps, isDragActive} = useDropzone({
    onDrop,
    accept: docUploadConfig.fileTypes.join(',')
    //accept: 'application/rtf'
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>Drop the files here ...</p>
      ) : (
        <p>Drag 'n' drop some files here, or click to select files</p>
      )}
    </div>
  );
}

function App() {
  return (
    <div>
      <MyDropzone />
    </div>
  );
}

export default App;

总结:

  1. 是否可以使其在反应下降区起作用?

  2. onDrop

  3. 时判断文件类型是一种更可靠的方法

0 个答案:

没有答案