blob和fileReader如何使用，是什么關(guān)系

直接給文件地址會(huì)有安全隱患嗎？一般是如何處理文件地址的。

前端下載的幾種方式，總結(jié)一下就是，如果返回的文件格式瀏覽器不能識別，瀏覽器就會(huì)下載。如果后端處理了響應(yīng)頭Content-Disposition: attachment; filename="filename.xls" ，那也可以下載。

但是還有一種情況，瀏覽器可以識別的文件格式，后端也沒有設(shè)置下載的響應(yīng)頭，需要前端自己處理下載的情況。

后端傳的是二進(jìn)制流，前端應(yīng)該如何通過blob處理二進(jìn)制文件流格式流，并實(shí)現(xiàn)前端下載文件流格式

1.加和不加responseType: 'blob'的區(qū)別

前提:axios請求圖片下載地址

function handleDownload() {
    axios({
      url: 'http://localhost:3001/saveImg',
      // responseType: 'blob',//axios請求配置中設(shè)置和不設(shè)置responseType
      method: 'get'
    })
      .then(data => {
        console.log(data)
        const blog = new Blob([data.data], {
          type: 'image/jpeg'
        }) // 將data數(shù)據(jù)轉(zhuǎn)為blob對象
        const url = window.URL.createObjectURL(blog) // 將blob對象轉(zhuǎn)為blob地址
        console.log(url)
        // 創(chuàng)建DOM實(shí)現(xiàn)下載
        // let a = document.createElement('a')
        // a.download = 'img01.jpg'
        // a.href = url
        // a.click()
      }).catch(err => {
        console.error(err)
      })
  }

結(jié)果

不加

加

responseType如果不設(shè)置，默認(rèn)值是JSON。從結(jié)果來看，responsetype的值不同，axios會(huì)對響應(yīng)的數(shù)據(jù)進(jìn)行響應(yīng)的轉(zhuǎn)換。