关于这些年做的 图片上传下载做的处理总结(including根据图片url上传文件)
下載文檔
我們查柜的認知是后端給前端傳一個鏈接地址,將地址放在a標簽上,點擊鏈接下載文件。
可有時候往往不是這樣的,后端給前端返回了一個文檔流,這就需要我們自己轉換為Blob格式的數據,再使用這個數據轉化成一個url地址,模擬一個a標簽,將地址放進去。
如何在只有圖片url的情況下,上傳文件
下面是前兩年有個需求,當時寫了下相關說明文檔
https://shimo.im/docs/wRrcpkTJkqcqpqX6/ 《記圖片地址轉文件并上傳的一次操作》,可復制鏈接后用石墨文檔 App 或小程序打開
簡單概括一下我們的需求:我們要在點擊圖片之后,調用另一個接口,把該張圖片文件上傳上去。
點擊這張圖片,我們只能拿到一個url
關于btoa和atob
btoa從String 對象中創建一個 base-64 編碼的 ASCII 字符串,其中字符串中的每個字符都被視為一個二進制數據字節
atob 將base64解碼,還原成編碼前的數據
其實這兩個方法特別好記,拆開看就是 b to a ,以及 a to b
const encodedData = btoa(‘Hello, world’); // encode a string
const decodedData = atob(encodedData); // decode the string
Uint8Array 數組類型表示一個8位無符號整型數組,創建時內容被初始化為0。創建完后,可以以對象的方式或使用數組下標索引的方式引用數組中的元素。
new Uint8Array(); // ES2017 最新語法
new Uint8Array(length); // 創建初始化為0的,包含length個元素的無符號整型數組
new Uint8Array(typedArray);
new Uint8Array(object);
new Uint8Array(buffer [, byteOffset [, length]]);
str.charCodeAt(index) 是將這個字符串的某一位,轉化成Unicode 16位整數
而charAt([index])是直接返回該字符串index處的字符
關于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);// 至關重要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'});// 至關重要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); // 清除釋放 };// 創建DOMStringlet src = window.URL.createObjectURL(blob); img.src = src document.getElementById("container1").appendChild(img); //====為了在頁面顯示圖片,可以刪除====}}xhr.send(); }粘貼上傳
主要原理是監聽粘貼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就是剪切板中的圖片文件 });預覽上傳的圖片
var reader = new FileReader() reader.onload = function(event) {// event.target.result就是圖片的Base64地址啦 } reader.readAsDataURL(file);上面代碼中的event.target.result就是圖片的Base64地址,然后頁面對應DOM元素位置插入如下HTML就可以看到圖片效果了:
< img src="’ + event.target.result + '"/>
總結
以上是生活随笔為你收集整理的关于这些年做的 图片上传下载做的处理总结(including根据图片url上传文件)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 总线通信协议-PCI
- 下一篇: 我的十年青春(10至20):写博10年1