下載文檔

我們查柜的認(rèn)知是后端給前端傳一個鏈接地址，將地址放在a標(biāo)簽上，點擊鏈接下載文件。
可有時候往往不是這樣的，后端給前端返回了一個文檔流，這就需要我們自己轉(zhuǎn)換為Blob格式的數(shù)據(jù)，再使用這個數(shù)據(jù)轉(zhuǎn)化成一個url地址，模擬一個a標(biāo)簽，將地址放進去。

//創(chuàng)建一個blob是excel格式的let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});let contentDisposition = res.headers['content-disposition'];//國際化默認(rèn)名稱let fileName = langUtil.t(defineMessages({v: { id: 'dynamicForm.export.excelName', defaultMessage: '表格數(shù)據(jù)' }}))+"_"+moment(new Date()).format("YYYY-MM-DD");//根據(jù)后端返回res.headers['content-disposition'];格式，取文件名if (contentDisposition) {fileName = window.decodeURI((contentDisposition.split(';')[1] || '').split('=')[1],'UTF-8');}//createObjectURL創(chuàng)建一個地址let downloadUrl = URL.createObjectURL(blob);//創(chuàng)建a標(biāo)簽，賦值地址let downloadLink = document.createElement('a');downloadLink.style.display = 'none';downloadLink.href = downloadUrl;//設(shè)置下載的屬性downloadLink.setAttribute('download', fileName);document.body.appendChild(downloadLink);//模擬點擊downloadLink.click();

如何在只有圖片url的情況下，上傳文件

下面是前兩年有個需求，當(dāng)時寫了下相關(guān)說明文檔
https://shimo.im/docs/wRrcpkTJkqcqpqX6/ 《記圖片地址轉(zhuǎn)文件并上傳的一次操作》，可復(fù)制鏈接后用石墨文檔 App 或小程序打開

簡單概括一下我們的需求：我們要在點擊圖片之后，調(diào)用另一個接口，把該張圖片文件上傳上去。
點擊這張圖片，我們只能拿到一個url

//這是我們能拿到的圖片地址 var img ="http://dumbo-daily.oss-cn-shanghai.aliyuncs.com/images/80146/29968540-2d52-11ea-9da8-9d82bfa55a03.png?OSSAccessKeyId=LTAI4FuYJmVdizPfGGW3TjnH&Expires=15779641503600&Signature=E0oIN1zu0%2Ff%2B%2BsA1p2G2jvrjRiI%3D"; //我們創(chuàng)建一個圖片，將圖片地址賦給圖片 var image = new Image(); image.src = img; image.setAttribute("crossOrigin", "Anonymous"); image.onload = function() { //等到圖片加載完成之后，將圖片轉(zhuǎn)成base64var base64 = getBase64Image(image);console.log(base64);//將base64轉(zhuǎn)換成filevar file = btof(base64, "test");//拿到file，用file上傳文件};//下面是分別使用的兩個方法//將圖片轉(zhuǎn)換成base64 function getBase64Image(img) {//先將圖片轉(zhuǎn)換成canvas，并繪制canvasvar canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();//使用canvas的toDataUrl，將canvas轉(zhuǎn)換成base64數(shù)據(jù)var dataURL = canvas.toDataURL("image/" + ext);return dataURL; }//轉(zhuǎn)換成file function btof(data, fileName) {const dataArr = data.split(",");//處理base64 數(shù)據(jù)//因為圖片的base64大概是這樣的 ：base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=//所以要將數(shù)據(jù)截取一下const byteString = atob(dataArr[1]);const options = {type: "image/jpeg",endings: "native"};// 創(chuàng)建一個8位無符號整型數(shù)組，將byteString的每個字節(jié)轉(zhuǎn)換成unicode變化后，放進這個整型數(shù)組const u8Arr = new Uint8Array(byteString.length);for (let i = 0; i < byteString.length; i++) {u8Arr[i] = byteString.charCodeAt(i);}//然后就可以根據(jù)數(shù)組創(chuàng)建文件了return new File([u8Arr], fileName + ".jpg", options); }

關(guān)于btoa和atob
btoa從String 對象中創(chuàng)建一個 base-64 編碼的 ASCII 字符串,其中字符串中的每個字符都被視為一個二進制數(shù)據(jù)字節(jié)
atob 將base64解碼，還原成編碼前的數(shù)據(jù)
其實這兩個方法特別好記，拆開看就是 b to a ，以及 a to b
const encodedData = btoa(‘Hello, world’); // encode a string
const decodedData = atob(encodedData); // decode the string

Uint8Array 數(shù)組類型表示一個8位無符號整型數(shù)組，創(chuàng)建時內(nèi)容被初始化為0。創(chuàng)建完后，可以以對象的方式或使用數(shù)組下標(biāo)索引的方式引用數(shù)組中的元素。
new Uint8Array(); // ES2017 最新語法
new Uint8Array(length); // 創(chuàng)建初始化為0的，包含length個元素的無符號整型數(shù)組
new Uint8Array(typedArray);
new Uint8Array(object);
new Uint8Array(buffer [, byteOffset [, length]]);

str.charCodeAt(index) 是將這個字符串的某一位，轉(zhuǎn)化成Unicode 16位整數(shù)
而charAt([index])是直接返回該字符串index處的字符

關(guān)于unicode，看看他人的文章 https://blog.csdn.net/hezh1994/article/details/78899683

方法二

getBase64(imgUrl,_this) {window.URL = window.URL || window.webkitURL;const xhr = new XMLHttpRequest();xhr.open("get", imgUrl, true);// 至關(guān)重要xhr.responseType = "blob";xhr.onload =function() {if (this.status == 200) {// 得到一個blob對象const blob1 = this.response;// const file = new File([blob], 'test.png', {type: 'image/png'});// 至關(guān)重要const oFileReader = new FileReader();oFileReader.onloadend = (e)=> {const base64 = e.target.result;//拿到base64console.log(blob,file)};oFileReader.readAsDataURL(blob1);//====為了在頁面顯示圖片，可以刪除==== var img = document.createElement("img"); img.onload = function (e) { window.URL.revokeObjectURL(img.src); // 清除釋放 };// 創(chuàng)建DOMStringlet src = window.URL.createObjectURL(blob); img.src = src document.getElementById("container1").appendChild(img); //====為了在頁面顯示圖片，可以刪除====}}xhr.send(); }

粘貼上傳

主要原理是監(jiān)聽粘貼parse事件

document.addEventListener('paste', function (event) {var items = event.clipboardData && event.clipboardData.items;var file = null;if (items && items.length) {// 檢索剪切板itemsfor (var i = 0; i < items.length; i++) {if (items[i].type.indexOf('image') !== -1) {file = items[i].getAsFile();break;}}}// 此時file就是剪切板中的圖片文件 });

預(yù)覽上傳的圖片

var reader = new FileReader() reader.onload = function(event) {// event.target.result就是圖片的Base64地址啦 } reader.readAsDataURL(file);

上面代碼中的event.target.result就是圖片的Base64地址，然后頁面對應(yīng)DOM元素位置插入如下HTML就可以看到圖片效果了：

< img src="’ + event.target.result + '"/>

總結(jié)

以上是生活随笔為你收集整理的关于这些年做的 图片上传下载做的处理总结（including根据图片url上传文件）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。