Question

我尝试使用React上传文件并查看其内容，但它给我的是C:\fakepath\。我知道为什么它会给fakepath，但是在反应中上传和读取文件内容的正确方法是什么？

<input type="file"
      name="myFile"
      onChange={this.handleChange} />

handleChange: function(e) {
        switch (e.target.name) {
        case 'myFile':
            const data = new FormData();
            data.append('file', e.target.value);
            console.log(data);
        default:
            console.error('Error in handleChange()'); break;
        }
    },

Answer 1

获取要使用的文件信息event.target.files，这是一组选定的文件。其中的每一个都可以通过FormData对象轻松上传。请参阅下面的代码段：

class FileInput extends React.Component {
    constructor(props) {
      super(props)
      this.uploadFile = this.uploadFile.bind(this);
    }
    
    uploadFile(event) {
        let file = event.target.files[0];
        console.log(file);
        
        if (file) {
          let data = new FormData();
          data.append('file', file);
          // axios.post('/files', data)...
        }
    }
    
    render() {
      return <span>
        <input type="file"
        name="myFile"
        onChange={this.uploadFile} />
      </span>
    }
}

ReactDOM.render(<FileInput />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="root"></div>

如果您想在客户端处理文件，例如显示图片，您可能需要查看FileReader，这可能会有所帮助。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Answer 2

你有使用dropzone吗？请参阅此react-dropzone

如果这很重要，可以轻松实现，上传和返回网址。

onDrop: acceptedFiles => {
    const req = request.post('/upload');
    acceptedFiles.forEach(file => {
        req.attach(file.name, file);
    });
    req.end(callback);
}

Answer 3

尝试在后端使用Multer和gridfs-storage，并将文件ID和猫鼬模式一起存储。

// Create a storage object with a given configuration
const storage = require('multer-gridfs-storage')({
  url: 'MONGOP DB ATLAS URL'
});

// Set multer storage engine to the newly created object
const upload = multer({ storage }).single('file');

router.post('/', upload, (req, res) => {

  const newreminder = new Reminders({
    category: req.body.category,
    name:req.body.name,
    type: req.body.type,
    exdate: req.body.exdate,
    location:req.body.location,
    notes:req.body.notes,
    fileID: req.file.id
  });
  newreminder.save(function(err){
    if(err){
      console.log(err);
      return;
    }

    res.json({ "success": "true"});
  });

});

然后在前端将其正常处理（使用Axios）并上传整个文件，并以正常的反应方式获取所有信息：

onSubmit = (e) => {
  e.preventDefault;
  const formData = new FormData();
  formData.append({ [e.target.name]: e.target.value })
  formData.append('file', e.target.files[0]);

  axios.post({
    method:'POST',
    url:'EXPRESS JS POST REQUEST PATH',
    data: formData,
    config:{ headers: {'Content-Type':'multipart/form-data, boundary=${form._boundary}'}}
  })
  .then(res => console.log(res))
  .catch(err => console.log('Error', err))
}

Answer 4

您可以使用 FileReader onload 方法读取文件数据，然后将其发送到服务器。

您会发现这对于在 React 中使用 File Reader 处理文件很有用 ReactJS File Reader

上传并读取文件

4 个答案: