Question

我试图从zip文件中提取png以上传到服务器。我的问题是我加载的blob具有错误的内容类型，因此服务器拒绝它们。

任何人都可以告诉我如何更改blob上的内容类型，或者将文件解压缩为图像

以下是我如何提取它们

  JSZip.loadAsync(file)
  .then(function (zip) {
    const re = /(.jpg|.png|.gif|.ps|.jpeg)$/
    const dataFile = /(.json)$/
    const promises = Object.keys(zip.files).filter(function (fileName) {
      return re.test(fileName.toLowerCase())
    }).map(function (fileName) {
      const file = zip.files[fileName]
      return file.async('blob').then(function (blob) {
        return [
          fileName,
          URL.createObjectURL(blob),
        ]
      })
    })

    const jsonPromise = Object.keys(zip.files).filter(function (fileName) {
      return dataFile.test(fileName.toLowerCase())
    }).map(function (fileName) {

      const file = zip.files[fileName]

      return file.async('string').then(function (data) {
        return [
          'data',
          data,
        ]
      })
    })
    promises.push(jsonPromise[0])
    return Promise.all(promises)
  }).then(function (result) {
    return result.reduce(function (acc, val) {
      acc[val[0]] = val[1]
      return acc
    }, {})
  }).then((result)=>{

    const object = JSON.parse(result.data)
    for(let i in object.images)
      object.images[i].url = result[object.images[i].name]

    resolve(object)

  }).catch((err)=>{reject(err)})

}）

然后我获取blob网址并尝试上传

 fetch(blobURL).then(res => res.blob()).then((blob)=>{

  blob.lastModifiedDate = new Date()
  blob.name = 'model_' + id + '_' +  uuidv1()  + '.png'

但是这个blob是contentType＆＃39; plain / text＆＃39;什么时候应该是png。

Answer 1

我将blob绘制成图像，转换为画布并上传...似乎是一个不优雅的解决方案

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

const img = new Image()

img.onload = function () {
  canvas.width = this.naturalWidth     // update canvas size to match image
  canvas.height = this.naturalHeight
  ctx.drawImage(this, 0, 0)
  uploadFromCanvas(canvas,hotspot).then(resolve)
}
img.src = blobURL

}）

使用正确的内容类型从JsZip中提取图像

1 个答案: