Definition: Blob objects represent immutable, file-like objects that contain raw data.

  • Two parameters
    • Data types of data objects (ArrayBuffer ArraybufferView, Blob, String, etc.)
    • Mime type
    • Result: A Blob object is generated

First, file download

1.1, a tag href download

Response headers that the browser does not recognize, or that cannot be parsed, are downloaded as files.

1.2, base64

After converting the file to base64, use the url() of the SRC and CSS for the A, img tag.

1.3, a Blob stream

1.ArrayBuffer receives data in binary stream format from read files

2.window.URL.createObjectURL(blob); Change the Blob stream to DOMString

Personal use: == Download using the A tag (FF does not support the Download attribute) ==

Window.open, which allows individual browsers to recognize individual image formats, is preview, not download

// request file data axios({method: 'GET', url: record.url, responseType: 'blob'}). Res){this.$message.warning(' file download failed '); Let Blob = new Blob([res.data], {type: mimeType}); If (' Download 'in document.createElement("a")){const link = document.createElement("a"); link.href = window.URL.createObjectURL(blob); link.download = record.name; link.click(); link.remove(); window.URL.revokeObjectURL(link.href); } else {/ / weakness: individual browser can identify specific image format, can browse directly, rather than downloading the let targetUrl = window. URL. CreateObjectURL (blob); window.open(targetUrl); window.URL.revokeObjectURL(targetUrl); } }).catch(err=>{ console.error(err) })Copy the code

Problem: It is compatible with Sogou, but window.open on 360 opens tabs, not Windows

Solution: Use iframe (test: cannot change file name)

function IEdownloadFile(fileName, contentOrPath){ var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = contentOrPath; document.body.appendChild(ifr); / / save the page - > save file ifr. ContentWindow. Document. ExecCommand (" SaveAs ", false, fileName); document.body.removeChild(ifr); } var isImg = contentorPath. slice(0, 10) === "data:image"; / / the dataURL isImg && ifr. ContentWindow. Document. Write (" < img SRC = '" + contentOrPath + "' / > ");Copy the code

Second, the compression

  • File transfer Base64
  • Image lossy compression, toDataURL
/* * Base64 * @param {file} file image object * @param {number} quality FileToBase64ByQuality (file,quality){return new Promise((resolve, resolve) reject) => { if(file.type === 'image/jpeg' || file.type === 'image/webp'){ let fileReader = new FileReader() let type = file.type if (window.URL || window.webkitURL) { resolve(this.fileCompress(URL.createObjectURL(file), quality, type, file.name)) } else { fileReader.onload = () => { resolve(this.fileCompress(fileReader.result, quality, type, file.name)) } fileReader.onerror = (e) => { reject(e) } fileReader.readAsDataURL(file) } }else{ resolve(file); }})},Copy the code
  • File compression
/* * rule: Only in image/ JPEG format, * @param {file} fileBase64 fileBase64 data * */ fileCompress(fileBase64, quality, mimeType, Const MAX_WIDTH = 800 let CVS = document.createElement('canvas'); let img = document.createElement('img'); img.crossOrigin = 'anonymous' return new Promise((resolve, Reject) => {img. SRC = fileBase64 // let offetX = 0 img.onload = () => {if (img.width > MAX_WIDTH) {cvs.width = MAX_WIDTH cvs.height = img.height * MAX_WIDTH / img.width offetX = (img.width - MAX_WIDTH) / 2 } else { cvs.width = img.width cvs.height = img.height } let ctx = cvs.getContext("2d").drawImage(img, 0, 0, cvs.width, cvs.height) let imageData = cvs.toDataURL(mimeType, quality) resolve(this.convertBase64UrlToBlob(imageData, mimeType, fileName)) } }) },Copy the code
  • Base64 Transfers files to streams
/** * base64 file transfer * @param {base64} base64 data * @param {string} mimeType MIME type * @return {file} File BLOB binary data */ convertBase64UrlToBlob(base64, mimeType, fileName){ let bytes = window.atob(base64.split(',')[1]) let ab = new ArrayBuffer(bytes.length) let ia = new Uint8Array(ab) for (let i = 0; i < bytes.length; I ++) {ia[I] = bytes.charcodeat (I)} let _blob = new Blob([ab], {type: mimeType }) let files = new File([_blob], fileName, {type: mimeType}) return files },Copy the code

Upload large files in fragments

Blob objects have a slice method that cuts large files into n-1 pieces of the same size, plus the last section

function fileSlice(file, piece = 1024 * 1024){
	let allSize = file.size;
    let start = 0;
    let end = start + piece;
    let filePieceArr = [];
    while(end > allSize){
    	filePieceArr.push(file.slice(start, end));
        start = end;
        end = start + piece;
    }
    return filePieceArr
}
Copy the code

Just start to write an article, if you can, please give some advice, thank you