js flie图片流转base64

最新推荐文章于 2024-08-07 04:14:40 发布

背书包的甜瓜

最新推荐文章于 2024-08-07 04:14:40 发布

阅读量418

点赞数

分类专栏： Vue 文章标签： vue.js js Powered by 金山文档

本文链接：https://blog.csdn.net/dashanjv/article/details/128724805

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章展示了如何在JavaScript中封装一个函数(imgBase64)来将图片文件转换为Base64格式，利用FileReaderAPI和Promise处理异步操作。此功能被应用于Element-UI的上传组件中，当文件改变时触发转换，并将结果赋值给状态变量cellData.value。

摘要由CSDN通过智能技术生成

// 封装 common.js
export default {
    // 图片转base64 
    imgBase64: (file) => {
        return new Promise((resolve, reject) => {
            let reader = new FileReader();  
            reader.readAsDataURL(file);  
            reader.onload = function (e) {   
                resolve(e.target.result)
            }
        })
        
    }
};

使用element-ui上传组件 //common.imgBase64()
 <el-upload class="avatar-uploader" action="#" :show-file-list="false" drag :auto-upload="false" :on-change="upload">
  <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>


const upload = (uploadFile, uploadFiles) => {
    // 图片转base64
    common.imgBase64(uploadFile.raw)
        .then((result) => {
            // console.log(result);
            state.cellData.value = result;
        })
        .catch((err) => {});
};