前端/H5/JS：通过URL下载文件并转存到其他服务器（微信），Blob文件转File文件，下载到本地

现在有一个图片URL，在自己服务器上，一个微信提供的媒体文件上传URL，我在前端通过JS实现转存微信服务器

1. http://file.xxx.com/asd.jpg 自己的

2.https://api.weixin.qq.com/cgi-bin 微信

 

浏览器访问http://file.xxx.com/asd.jpg，看到一个图，并且，请求的 Content-Type:image/jpeg

首先，先把文件以Blob下载下来到内存

PS：也可以提供一个本地路径，来进行下载到nodejs/浏览器管理的内存中

function getBlob(url, callback) { 
        var xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        xhr.responseType = 'blob'
        xhr.onload = () => {
            console.log(xhr.response)
        }
        xhr.send()
}

 

console打印如下：

Blob {size: 5523, type: "image/jpeg"} 

 

 

 

然后，把Blob转File

const blob = xhr.response

const files = new window.File([blob], `abc.${blob.type.split('/')[1]}`, { type: blob.type })

打印File如下

 

 

 

接着，用Form包裹，

 

  const formData = new FormData()
  formData.append('media', files)

 

最后，把formData放到POST的body，调用上传即可

 

2020.07.03 更新

有同学问到，如果想要把该blob文件下载到本地，怎么做

 

 function downloadFileByBlob (blobUrl, filename) {
    const a = document.createElement('a')
    a.download = filename
    a.style.display = 'none'
    a.href = blobUrl
    // 触发点击
    document.body.appendChild(a)
    a.click()
    // 然后移除
    document.body.removeChild(a)
  }

 

应该在onload的回调里，这样调用

xhr.onload = () => {
      const blob = xhr.response
      const blobUrl = window.URL.createObjectURL(blob)
      downloadFileByBlob(blobUrl, `abc.${blob.type.split('/')[1]}`)
}