File streaming download and preview

Download and preview the file stream returned by the interface

function downloadFile(uuid) {
    
    
   return request.default({
    
    
     method: "get",
     url: baseUrl + uuid,
     responseType: "arraybuffer",	// 改为blob则不需要转换
   });
 },

// 下载文件预览
async function viewFile(uuid) {
    
    
  const file = await downloadFile(uuid);  // 下载接口，返回文件流
  const blob = new Blob([file]);
  const reader = new FileReader();
  reader.readAsDataURL(blob);		// 图片预览
  // reader.readAsText(blob, "utf-8");		// 文本文件预览
  reader.onload = () => {
    
    
    // 返回文件路径
    this.imgUrl = reader.result	
    // this.textData = reader.result	
  };
}

// 下载文件
function handleDownloadFile(uuid, fileName) {
    
    
  const file = await downloadFile(uuid);  // 下载接口，返回文件流
  const blob = new Blob([file]);
  
  const a = document.createElement("a");
  const objectUrl = URL.createObjectURL(blob);
  a.setAttribute("href", objectUrl);
  a.setAttribute("download", fileName);
  a.click();

  URL.revokeObjectURL(a.href); // 释放url
}

tips: both can be used
on the preview file . But the generated url is placed on the img, and after the img node is deleted, the url seems to be released and cannot be used again.FileReaderURL.createObjectURLURL.createObjectURL

document link

URL.createObjectURL
FileReader