vue前端如何將任意文件轉(zhuǎn)為base64傳給后端
更新時間：2024年03月07日 10:17:35 作者：相與還
這篇文章主要介紹了vue前端如何將任意文件轉(zhuǎn)為base64傳給后端問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
最近新項目，需要獲取文件的bae64編碼文本，但是原本是用的vantUI的uploader，對安卓手機的圖片上傳和文件上傳的數(shù)量有限制，一次只能上傳一張圖片（簡直麻了），于是舍棄了它，轉(zhuǎn)而圖片的繼續(xù)沿用之前用過的weixin-js-sdk這個微信的上傳圖片接口進行上傳圖片。
但是還有一個要求是需要處理pdf為base64，這個微信的只能處理圖片，所以花了很長的時間一直在查找資料，終于功夫不負有心人，做出來了獲取pdf的base64編碼的前端代碼。
同時，經(jīng)過測試，發(fā)現(xiàn)這個代碼不僅僅能用在pdf上，任意格式，比如pdf，xslx，doc文件都可以轉(zhuǎn)base64。
使用原生input
這個方式，使用的是H5原生的input進行上傳文件
// getBase64為獲取base64的方法
<input type="file" @change="getBase64">
具體實現(xiàn)
ps:發(fā)現(xiàn)一個問題：reader.onload 獲取不到內(nèi)部的值，查詢資料現(xiàn)對如下代碼進行修改
原版：
// 界面
<template>
<div>
<input type="file" @change="getBase64">
</div>
</template>
//js代碼
<script>
export default {
methods: {
getBase64(e) {
// 選擇的文件
let file = e.target.files[0];
console.log(file.name) // 文件名稱，有需求可處理
console.log(file.type) // 文件類型，有需求可處理
// 判斷文件是否讀取完畢，讀取完畢后執(zhí)行
if (window.FileReader) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
let base64String = e.target.result;
// 此處可對該base64進行獲取賦值傳入后端
console.log("bese64編碼：", base64String);
}
}
}
}
}
</script>
修改后：
// 界面
<template>
<div>
<input type="file" @change="getBase64">
</div>
</template>
//js代碼
<script>
export default {
methods: {
getBase64(e) {
// 選擇的文件
let file = e.target.files[0];
console.log(file.name) // 文件名稱，有需求可處理
console.log(file.type) // 文件類型，有需求可處理
// 判斷文件是否讀取完畢，讀取完畢后執(zhí)行
if (window.FileReader) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
let base64String = e.target.result;
// 此處可對該base64進行獲取賦值傳入后端
console.log("bese64編碼：", base64String);
}
}
}
}
}
</script>
即：
reader.onload = function(e) {} ======>修改為：
reader.onload = e => {}主要原因是說function() {} 的方式不支持this,導致獲取不到值
截圖
以下為轉(zhuǎn)base64后的截圖樣例
總結(jié)
綜上，前端任意文件轉(zhuǎn)base64的代碼處理完成！
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue路由history模式解決404問題的幾種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本文介紹了如何使用html2canvas庫來實現(xiàn)HTML頁面或某個元素的截圖功能,文中通過代碼介紹的非常詳細,需要注意的是此方法只能在瀏覽器環(huán)境中使用,需要的朋友可以參考下2024-10-10
我們都知道Electron項目分為了主進程和渲染進程,主進程其實就是我們的Electron,渲染進程就相當于我們的Vue項目,下面這篇文章主要給大家介紹了關(guān)于vue項目使用electron進行打包操作的全過程,需要的朋友可以參考下2023-03-03
vue-router之路由鉤子函數(shù)應用小結(jié)
vue-router提供的導航鉤子主要用來攔截導航,讓它完成跳轉(zhuǎn)或取消，本文主要介紹了vue-router之路由鉤子函數(shù)應用小結(jié)，具有一定的參考價值，感興趣的可以了解一下2024-01-01
vue開發(fā)table數(shù)據(jù)合并實現(xiàn)詳解
這篇文章主要為大家介紹了vue開發(fā)table數(shù)據(jù)合并實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue.js實現(xiàn)的幻燈片功能,結(jié)合實例形式分析了vue.js實現(xiàn)幻燈片的相關(guān)樣式、配置、功能等操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了Vue3集成sass的詳細過程,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-04-04
這篇文章主要介紹了如何本地運行vue?dist文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue事件總線的使用問題及解讀,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了手把手教學vue的路由權(quán)限問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12