前端/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]}`)
}