vue中图片转base64格式实现方法
vue图片转base64格式
直入主题,上代码(其实用的还是FileReader)
主要方法
handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file.raw); // 一定要传入file格式 reader.onload = () => { console.log("file 转 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 转 base64结果:" + reader.result); }; reader.onerror = function(error) { console.log("Error: ", error); }; }, } }; </script> <style scoped> /* @import url(); 引入css类 */ </style>
注意:
今天在使用Vue进行文件上传的代码编写时,发现报错:
Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."
`
显然,是传入的file对象出了问题,根据报错提示,我们应该传入一个Blob对象。也就是说,file不是Blob对象
我们使用console.log(file)进行调试输出:
看,raw这个属性写了个大大的File
把raw这个File对象传入即可
OK啦!!!
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue+element-ui前端使用print-js实现打印功能(可自定义样式)
Print.js主要是为了帮助我们直接在浏览器中开发打印功能,下面这篇文章主要给大家介绍了关于vue+element-ui前端使用print-js实现打印功能(可自定义样式)的相关资料,需要的朋友可以参考下2022-11-11VuePress在build打包时window document is not defined问题解决
这篇文章主要为大家介绍了VuePress在build打包时window document is not defined问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
最新评论