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