【Vue-Element】el-upload将文件转为Blob类型

最新推荐文章于 2024-04-22 17:38:08 发布

feifeiyechuan

最新推荐文章于 2024-04-22 17:38:08 发布

阅读量4.9k

点赞数 4

分类专栏： # 【前端】Vue # 【前端】Element-UI 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/feifeiyechuan/article/details/125272032

版权

【前端】Vue 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

【前端】Element-UI

11 篇文章 0 订阅

订阅专栏

本文展示了如何在Vue2应用中使用JS将上传的文件转换为Blob类型。通过`el-upload`组件实现文件上传，然后在`onUploadChange`回调中，将文件原始数据转换成Blob对象，便于进一步的文件操作。示例代码详细说明了转换过程。

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

参考了很多内容，这个最直接：

1、Vue

 <el-upload
    class="upload-demo upload-tip"
     drag
     ref="upload"
     :action="uploadUrl()"   
     :auto-upload="false"      
     :on-change="onUploadChange"
     multiple>
     <i class="el-icon-upload"></i>
     <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
     <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>

2、JS

onUploadChange(file){
      const that = this
      const _file = file.raw;
      let blob = new Blob([_file], { type: "audio/wav"});
      console.log('blob:', blob);
}