Mac下复制磁盘非图片类型文件clipboardData却得到图片类型的mime

Question

问题描述

Mac下复制磁盘非图片类型文件clipboardData却得到图片类型的mime,items中的数据跟图片类型的表现一致

问题出现的环境背景及自己尝试过哪些方法

• macos
• chrome@74
• ctrl+v或右键复制都一样

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

import React from 'react'
import PropTypes from 'prop-types'

import styles from './index.css'


class Editor extends React.PureComponent {
  constructor (props) {
    super(props)

    this.readFile = this.readFile.bind(this)
    this.handleDrop = this.handleDrop.bind(this)
    this.handlePaste = this.handlePaste.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleDropAndParseImage = this.handleDropAndParseImage.bind(this)

    this.state = {
      value: ''
    }
  }

  readFile (file) {
    return new Promise(resolve => {
      const reader = new window.FileReader()
      reader.onload = () => resolve(reader.result)
      reader.readAsDataURL(file)
    })
  }

  handleDrop (e) {
    const file = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0]
    file && this.handleDropAndParseImage(e, file)
  }

  handlePaste (e) {
    var cbd = window.clipboardData || e.clipboardData

    // safari
    if (!(cbd && cbd.items)) {
      return
    }
 
    let file = null
    console.log(cbd.types)
    for (var i = 0; i < cbd.items.length; i++) {
      var item = cbd.items[i]
      console.log(item)
      if (item.kind === 'file') {
        file = item.getAsFile()
        console.log('?你太美美：', file)
        break
      }
    }

    file && this.handleDropAndParseImage(e, file)
  }

  async handleDropAndParseImage (e, file) {
    e.preventDefault()
    console.log(file)
    const { onError, t } = this.props
    const { size = 0, type = '' } = file
    if (type.includes('image')) {
        console.log('I got u!')
    }
  }

  handleChange (e) {
    const value = e.target.value
    this.setState({ value }}
  }

  render () {
    const { value } = this.state

    return (
      <div className={styles.root}>
        <textarea
          autoFocus
          className={styles.editor}
          value={this.state.value}
          onDrop={this.handleDrop}
          onPaste={this.handlePaste}
          onChange={this.handleChange}
          placeholder={'placeholder'}
          ref={editor => (this.editor = editor)}
        />
      </div>
    )
  }
}

Editor.propTypes = {
}

export default Editor

你期待的结果是什么？实际看到的错误信息又是什么？

期望

复制了一份.json文件，希望能获取到复制文件对应的mime

错误信息

• file 为空

Answer 1

我也发现了这个问题，暂时可以解决么