Vue.js 關於 base64 編碼的問題

vue.js base64

ping1000 2021-07-13 11:06:44 ‧ 1089 瀏覽

分享至

想請問一下有方法可以呼叫 & 傳值到另一個 function ?

例如我有辦法在 function uploadFileChunk 裡面再用一個 function handleFileSelect(evt) 嗎? 然後再把 base64_recode 傳到 function uploadFileChunk讀取??

function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {

let base64_recode ;

function handleFileSelect(evt) {
var f = evt.target.files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var binaryData = e.target.result;
var base64String = window.btoa(binaryData);
base64_recode = base64String;
};
})(f);
reader.readAsBinaryString(f);
}

base64_recode ???

}

看更多先前的討論...收起先前的討論...

screenleon iT邦新手 1 級 ‧ 2021-07-13 11:27:16 檢舉

你的 function(e) {} 裡面並沒有回傳值導致return 匿名函式沒有任何回傳
裡面加一句試試看
return theFile;

淺水員 iT邦大師 6 級 ‧ 2021-07-13 13:52:00 檢舉

先不管原本的寫法如何，可以說一下你原本要的是什麼嗎？
1. 輸入(input)的東西是什麼？
2. 希望輸出(output)的東西是什麼？

ping1000 iT邦新手 5 級 ‧ 2021-07-13 13:53:02 檢舉

還是一樣呢~
想請問一下還是有方法可以呼叫 & 傳值到另一個 function ?

例如我有辦法在 function uploadFileChunk 裡面再用一個 function handleFileSelect(evt) 嗎? 然後再把 base64_recode 傳到 function uploadFileChunk讀取??

```
function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {

let base64_recode ;

function handleFileSelect(evt) {
var f = evt.target.files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var binaryData = e.target.result;
var base64String = window.btoa(binaryData);
base64_recode = base64String;
};
})(f);
reader.readAsBinaryString(f);
}

base64_recode ???

}
```

淺水員 iT邦大師 6 級 ‧ 2021-07-13 13:59:50 檢舉

IIFE 可以先看看，我猜你的問題跟這個有關
https://developer.mozilla.org/zh-TW/docs/Glossary/IIFE

ping1000 iT邦新手 5 級 ‧ 2021-07-13 14:09:06 檢舉

原先 input 是透過 DevExtreme 的 Filemanager 套件上傳
所以會被限制要在 function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {} 這裡面去動作 ~ 所以才想要在這裡面再放一個 function 去執行 base64 的動作

淺水員 iT邦大師 6 級 ‧ 2021-07-13 14:10:00 檢舉

另外也牽涉到非同步的處理
為什麼不直接把取得base64之後要做的動作放在 onload 裡面就好？

ping1000 iT邦新手 5 級 ‧ 2021-07-13 14:12:44 檢舉

放在 onload?? 不太懂.... 我是 Vue 新手 :(
因為在我的想法是我不是應該要在 function uploadFileChunk 才可以抓到 fileData, fileData 這一個是使用者上傳的檔案資訊

淺水員 iT邦大師 6 級 ‧ 2021-07-13 14:19:59 檢舉

所以 fileData 是要用 base64 格式嗎?

ping1000 iT邦新手 5 級 ‧ 2021-07-13 14:22:22 檢舉

恩恩~因為 fileData 是檔案~ 所以要把這一個傳到 server 上面去

ping1000 iT邦新手 5 級 ‧ 2021-07-13 14:23:41 檢舉

console.log 出來是這樣的

File {name: "202107工作日誌.xlsx", lastModified: 1625651854258, lastModifiedDate: Wed Jul 07 2021 17:57:34 GMT+0800 (台北標準時間), webkitRelativePath: "", size: 9876, …}
lastModified: 1625651854258
lastModifiedDate: Wed Jul 07 2021 17:57:34 GMT+0800 (台北標準時間) {}
name: "202107工作日誌.xlsx"
size: 9876
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
webkitRelativePath: ""
__proto__: File

淺水員 iT邦大師 6 級 ‧ 2021-07-13 14:29:07 檢舉

如果上面是 console.log(fileData ) 的結果，那你根本不用轉成 base64
直接把 evt.target.files[0] 當作第一個參數傳過去就好

ping1000 iT邦新手 5 級 ‧ 2021-07-13 15:27:49 檢舉

不太懂@@

因為那個是
function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
console.log(fileData );
}

而我一值不懂的是我在 function uploadFileChunk {}
這裡面該怎麼去做 base64 的動作

因為我用 fileData.target.files[0] 會得到這個錯誤

error: TypeError: Cannot read property 'files' of undefined at CustomFileSystemProvider.uploadFileChunk (webpack-

target 後面那個 files 指的是?

listennn08 iT邦高手 5 級 ‧ 2021-07-13 15:55:25 檢舉

你用 devExtreme， fileData 拿到就會是 file 不需要再去取得 file，這些 api 文件都有寫，先學會翻官方文件好嗎

ping1000 iT邦新手 5 級 ‧ 2021-07-13 16:00:15 檢舉

我翻過了阿~可是我不知道該如何轉 base64 阿~ 我的問題是在這裡啊QQ" 因為我要轉 base64 才可以上傳到 server @@

listennn08 iT邦高手 5 級 ‧ 2021-07-13 16:29:10 檢舉

你原本的程式碼就有轉 base64 的程式碼了
你連原本的程式碼都還沒搞懂你要怎樣改寫

ping1000 iT邦新手 5 級 ‧ 2021-07-13 17:18:20 檢舉

可是 function 提供的三個參數都沒看到有 base64 的格式阿@@
是我查錯了嗎?
fileData, uploadInfo, destinationDirectory

第一個是這樣
ile {name: "202107工作日誌.xlsx", lastModified: 1625651854258, lastModifiedDate: Wed Jul 07 2021 17:57:34 GMT+0800 (台北標準時間), webkitRelativePath: "", size: 9876, …}
lastModified: 1625651854258
lastModifiedDate: Wed Jul 07 2021 17:57:34 GMT+0800 (台北標準時間) {}
name: "202107工作日誌.xlsx"
size: 9876
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
webkitRelativePath: ""
__proto__: File

第二個是
{bytesUploaded: 0, chunkCount: 1, customData: {…}, chunkBlob: Blob, chunkIndex: 0, …}
bytesUploaded: 0
chunkBlob: Blob {size: 9876, type: ""}
chunkCount: 1
chunkIndex: 0
customData:
__proto__: Object
fileIndex: 0
__proto__: Object

第三個是路徑~ 可是我沒看到有 base64 的格式呢@@

screenleon iT邦新手 1 級 ‧ 2021-07-14 08:08:32 檢舉

window.btoa(binaryData) => 輸出就是base64格式

```=
reader.onload = (function(theFile) {
return function(e) {
return window.btoa(e.target.result);
};
})(f);
```

ping1000 iT邦新手 5 級 ‧ 2021-07-14 09:14:04 檢舉

我知道那個就是阿~
可是問題就是我這一段跑不到啊QQ"
因為 result 都是得到 null , 所以一值會跳開 function

若我用這樣
reader.onload = (function(theFile) {
return function(e) {
return window.btoa(e.target.result);
};
})(f);

會出現
error: ReferenceError: f is not defined at CustomFileSystemProvider.uploadFileChunk (webpack-internal

f 為定義

那是要用 let f; 嗎? 可是這樣也不能

若是我把 f 拿掉的話
就會完全跳過這個 function

ping1000 iT邦新手 5 級 ‧ 2021-07-14 11:51:45 檢舉

我改成這樣

if (fileData.length > 0) {
getBase64(fileData[0]);
}
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(fileData[0]);
reader.onload = function () {
console.log(reader.result);
};

console.log(window.btoa(fileData));
}

console.log(reader.result); 這一段還是一樣不會跑
是因為 result 一值都是 null 的關係嗎?

ping1000 iT邦新手 5 級 ‧ 2021-07-14 17:31:55 檢舉

這個是我的 sandbox

https://codesandbox.io/s/hierarchical-js-structure-devextreme-file-manager-forked-45yc5?file=/App.vue

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2021-07-13 14:23:04

是要這樣？

function handleFileSelect(evt) {
    var f = evt.target.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var binaryData = e.target.result;
        var base64String = window.btoa(binaryData);
        //把取得的 base64 作為參數，呼叫 uploadFileChunk
        uploadFileChunk(base64String, "後面參數自己加");
    };
    reader.readAsBinaryString(f);
}