Javascript 粘貼事件 - 獲取文件名

Question

粘貼事件文件返回一個通用名稱，例如“image.png”（在File file.name和items.getAsFile().name上的 file.name 內），這對我來說不是超級有用。 我編寫了以下代碼來獲取我粘貼的文件的名稱，但它看起來很臟而且有點黑客，有沒有更好的方法來做到這一點？

Codepen 示例： https://codepen.io/designalchemy/pen/mddvbyV?editors=1010

這個怎么運作：

1. 從粘貼事件中獲取項目 ( DataTransferList ) 和文件 ( FileList )
2. 使用DataTransferList中第一項的.getAsString()方法獲取文件名
3. 由於此方法會破壞.getAsFile方法，因此請使用文件 object 中的文件
4. 通過克隆和應用名稱重命名文件

我的代碼：

window.addEventListener('paste', onPasteEvent)

  const onPasteEvent = async e => {
    stopDefaults(e)
    const { items, files } = e.clipboardData

    // the .getAsString destorys the file object on 'items'
    // also can only do one paste at a time, no multi

    const file = files[0]
    const fileType = file.type

    if (file && fileType.includes('image')) {

      const fileName = await new Promise(res => {
        items[0].getAsString(e => {
          res(e)
        })
      })

      // clone file so we can change the name
      const newFile = [new File([file], fileName, { type: fileType })]

      if (newFile && newFile.length > 0) {
        callback && callback(newFile)
      }
    }
  }

Answer 1

我的解決方案：（雖然我不確定它是否符合您的需要）

我使用 FormData ...（'say' 是我的私人 'prettyprint'，代碼是 Coffescript）

        current_file=evt.originalEvent.clipboardData.files[0]
        say "bad bad!",current_file
        formData= new FormData
        formData.append("myfile",current_file,"my name")
        current_file=formData.get("myfile")
        say "tada!", current_file

output：

  'bad bad!', File(name:'image.png' size:16203 type:'image/png')
  'tada!', File(name:'my name' size:16203 type:'image/png')

這是快速和同步的。

我希望這會有所幫助並且是自我解釋的。 如果不告訴我。