vue中圖片轉(zhuǎn)base64格式實(shí)現(xiàn)方法
vue圖片轉(zhuǎn)base64格式
直入主題，上代碼（其實(shí)用的還是FileReader）
主要方法
handleRemove(file, fileList) {
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file.raw); // 一定要傳入file格式
reader.onload = () => {
console.log("file 轉(zhuǎn) base64結(jié)果：" + reader.result);
};
reader.onerror = function(error) {
console.log("Error: ", error);
};
},vue組件
<!-- -->
<template>
<div>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="handleRemove"
multiple
:limit="3"
>
<el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
</el-upload>
</div>
</template>
<script>
export default {
name: "",
data() {
return {};
},
methods: {
handleRemove(file, fileList) {
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = () => {
console.log("file 轉(zhuǎn) base64結(jié)果：" + reader.result);
};
reader.onerror = function(error) {
console.log("Error: ", error);
};
},
}
};
</script>
<style scoped>
/* @import url(); 引入css類 */
</style>
注意：
今天在使用Vue進(jìn)行文件上傳的代碼編寫時(shí)，發(fā)現(xiàn)報(bào)錯(cuò)：
Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."
`
顯然，是傳入的file對(duì)象出了問題，根據(jù)報(bào)錯(cuò)提示，我們應(yīng)該傳入一個(gè)Blob對(duì)象。也就是說，file不是Blob對(duì)象
我們使用console.log(file)進(jìn)行調(diào)試輸出：
看，raw這個(gè)屬性寫了個(gè)大大的File
把raw這個(gè)File對(duì)象傳入即可
OK啦?。?！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的，文章圍繞主題展開詳細(xì)的內(nèi)容介紹具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
一篇文章帶你了解vue.js的事件循環(huán)機(jī)制
這篇文章主要為大家詳細(xì)介紹了vue.js事件循環(huán)機(jī)制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問題及解決
這篇文章主要介紹了vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了ant?design?vue的table取消自帶分頁問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目?jī)?yōu)雅實(shí)現(xiàn)自動(dòng)引入組件的方法詳解
在我們寫vue項(xiàng)目的時(shí)候,都會(huì)引入一些組件庫,有時(shí)候有可能還不止一個(gè)組件庫,那么如何優(yōu)雅的實(shí)現(xiàn)自動(dòng)引入組件呢,下面小編就來和大家詳細(xì)講講吧2023-09-09
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue中Form 表單的 resetFields() 失效原因及問題解決
在Vue項(xiàng)目中,使用formRef.value.resetFields()方法重置表單時(shí)可能遇到不起作用的問題,下面就來介紹一下如何解決,感興趣的可以了解一下2024-09-09
基于Vue.js實(shí)現(xiàn)一個(gè)完整的登錄功能
在現(xiàn)代Web應(yīng)用中,用戶登錄功能是一個(gè)核心模塊,它不僅涉及到用戶身份驗(yàn)證,還需要處理表單驗(yàn)證、狀態(tài)管理、接口調(diào)用等多個(gè)環(huán)節(jié),本文將基于一個(gè)Vue.js項(xiàng)目中的登錄功能實(shí)現(xiàn),深入解析其背后的技術(shù)細(xì)節(jié),幫助開發(fā)者更好地理解和實(shí)現(xiàn)類似功能,需要的朋友可以參考下2025-02-02
Element實(shí)現(xiàn)表格嵌套、多個(gè)表格共用一個(gè)表頭的方法
這篇文章主要介紹了Element實(shí)現(xiàn)表格嵌套、多個(gè)表格共用一個(gè)表頭的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因
這篇文章主要介紹了解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07