vue前端如何將任意文件轉(zhuǎn)為base64傳給后端
最近新項(xiàng)目，需要獲取文件的bae64編碼文本，但是原本是用的vantUI的uploader，對(duì)安卓手機(jī)的圖片上傳和文件上傳的數(shù)量有限制，一次只能上傳一張圖片（簡(jiǎn)直麻了），于是舍棄了它，轉(zhuǎn)而圖片的繼續(xù)沿用之前用過(guò)的weixin-js-sdk這個(gè)微信的上傳圖片接口進(jìn)行上傳圖片。
但是還有一個(gè)要求是需要處理pdf為base64，這個(gè)微信的只能處理圖片，所以花了很長(zhǎng)的時(shí)間一直在查找資料，終于功夫不負(fù)有心人，做出來(lái)了獲取pdf的base64編碼的前端代碼。
同時(shí)，經(jīng)過(guò)測(cè)試，發(fā)現(xiàn)這個(gè)代碼不僅僅能用在pdf上，任意格式，比如pdf，xslx，doc文件都可以轉(zhuǎn)base64。
使用原生input
這個(gè)方式，使用的是H5原生的input進(jìn)行上傳文件
// getBase64為獲取base64的方法
<input type="file" @change="getBase64">
具體實(shí)現(xiàn)
ps:發(fā)現(xiàn)一個(gè)問(wèn)題：reader.onload 獲取不到內(nèi)部的值，查詢資料現(xiàn)對(duì)如下代碼進(jì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;
// 此處可對(duì)該base64進(jìn)行獲取賦值傳入后端
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;
// 此處可對(duì)該base64進(jìn)行獲取賦值傳入后端
console.log("bese64編碼：", base64String);
}
}
}
}
}
</script>
即：
reader.onload = function(e) {} ======>修改為：
reader.onload = e => {}主要原因是說(shuō)function() {} 的方式不支持this,導(dǎo)致獲取不到值
截圖
以下為轉(zhuǎn)base64后的截圖樣例
總結(jié)
綜上，前端任意文件轉(zhuǎn)base64的代碼處理完成！
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue.js列表渲染的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題
vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中，如果圖片較多，篇幅太長(zhǎng)，就會(huì)比較煩惱，接下來(lái)通過(guò)本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題及解決方法,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue3腳手架簡(jiǎn)單靜態(tài)路由,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了VueJs中customRef函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了Vue.directive 自定義指令，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
關(guān)于vue路由監(jiān)聽(tīng)事件跳轉(zhuǎn)的問(wèn)題
這篇文章主要介紹了關(guān)于vue路由監(jiān)聽(tīng)事件跳轉(zhuǎn)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
npm install卡在“sill idealTree buildDeps“問(wèn)題的兩種解
本文主要介紹了npm install卡在“sill idealTree buildDeps“問(wèn)題的兩種解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
前端通過(guò)vue調(diào)用后端接口導(dǎo)出excel表格基本步驟
在Vue前端項(xiàng)目中,可通過(guò)axios庫(kù)發(fā)送請(qǐng)求至后端獲取Excel下載鏈接,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-10-10
vue項(xiàng)目中使用rem,在入口文件添加內(nèi)容操作
這篇文章主要介紹了vue項(xiàng)目中使用rem,在入口文件添加內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
詳解vuex中的this.$store.dispatch方法
這篇文章主要介紹了vuex中的this.$store.dispatch方法,必須要用commit(‘SET_TOKEN’,?tokenV)調(diào)用mutations里的方法，才能在store存儲(chǔ)成功，需要的朋友可以參考下2022-11-11