iT邦幫忙

0

Vue.js 關於 base64 編碼的問題

  • 分享至 

  • xImage

Vue.js 關於 base64 編碼的問題

想請問一下 有方法可以呼叫 & 傳值到另一個 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 ???

}
看更多先前的討論...收起先前的討論...
你的 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 指的是?
你用 devExtreme, fileData 拿到就會是 file 不需要再去取得 file,這些 api 文件都有寫,先學會翻官方文件好嗎
ping1000 iT邦新手 5 級 ‧ 2021-07-13 16:00:15 檢舉
我翻過了阿~可是我不知道該如何轉 base64 阿~ 我的問題是在這裡啊QQ" 因為我要轉 base64 才可以上傳到 server @@
你原本的程式碼就有轉 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 的格式呢@@
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 }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
淺水員
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);
}

我要發表回答

立即登入回答