无法生成图像预览

Question

我在使用上传组件渲染图片预览时遇到问题。它一直在努力，直到最近，我认为它可能与服务工作者环境有关

现在每次上传图片都会引发以下错误

Failed to generate preview for file File(247272) {name: "Screenshot from 2018-06-01 11-17-56.png", lastModified: 1527823076505, lastModifiedDate: Fri Jun 01 2018 11:17:56 GMT+0800 (CST), webkitRelativePath: "", size: 247272, …} TypeError: window.URL.createObjectURL is not a function

我在这里缺少什么？

我这样称反应dropzone：

import React, { Component }             from 'react'
import Dropzone                         from 'react-dropzone'
import { HelpBlock, Grid, Row, Col, Form, FormGroup, ControlLabel, FormControl, Checkbox, InputGroup} from 'react-bootstrap';
import { injectIntl, FormattedMessage } from 'react-intl'
import utils from '../../../utils'
import './styles.css'

class ReviewFormBody extends Component {
  constructor(props) {
    super(props)

    this.state =  {
      titleValid: null,
      commentValid: null,
      maxSize: 5242880, // 5MB
      error: null
    }
  }

  appendFiles(files) {
    const {images} = this.props;
    if (files.length === 0) {
      return this.setState({ error: 'No file found.' })
    }

    const [ file ] = files

    if (file.size > this.state.maxSize) {
      return this.setState({
        error: `The file size can not exceed ${utils.formatBytes(this.state.maxSize)}.`
      })
    } else if (file.type.indexOf('image') === -1) {
      return this.setState({
        error: `Only images are accepted.`
      })
    } else if ((images.length + files.length) > 5){
      return this.setState({
        error: `Maximum allowed images per review is 5.`
      })
    }

    this.setState({ error: null })
    this.props.onUploadImagesChange(files)
  }

  render() {
    const { id, title, comment, anonymous, images, onTitleChange, onCommentChange, onAnonymousChange, onUploadImagesChange, onUploadImagesDelete, ...props } = this.props

    const { intl: { formatMessage } } = props

    return (
      <div styleName='form' className='text-left'>
        <div styleName='footer'>
          <ul className="list-unstyled w-100 block">
            <li className="pull-left">
              {
                images.length >= 5 ? (
                  <span styleName='upload max'><span className="icon-add-photo"></span><FormattedMessage id='review_form.photos_add' /></span>
                ) : (
                  <Dropzone className="review-dropzone"
                    multiple={true}
                    onDrop={(accepted, rejected) => { this.appendFiles(accepted, rejected); }}
                    accept='image/*'
                  >
                    <span styleName='upload'><span className="icon-add-photo"></span><FormattedMessage id='review_form.photos_add' /></span>
                  </Dropzone>
                )
              }
            </li>
          </ul>
        </div>
        <ul className="list-inline text-center" styleName='images'>
          {
            images ? images.map((img, index) => {
              return (
                <li key={`review-${id}-images-${index}`} styleName='img-unit'>
                  <img src={img.id ? img.picture : img.preview} alt="" />
                  <span onClick={() => onUploadImagesDelete(index, img.id)} styleName='overlay-delete'><i className='fa fa-close' /></span>
                </li>
              )
            }) : null
          }
        </ul>
      </div>
    )
  }
}

export default injectIntl(ReviewFormBody)