前端文件上传 —— 文件流转base64(element-upload为例)

有时候文件上传, 并不需要马上传给后台,而是需要先转 base64 预览等后面一并提交
以下以elemnt-upload为例,如何文件流前端自己先转成base64.

<template>
  <div class="upload-container">
    <el-upload
      :multiple="true"
      :http-request="httpRequest"
      :show-file-list="false"
      action="#"
    >
      <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary">
        上 传
      </el-button>
    </el-upload>
  </div>
</template>

<script>

export default {
  name: 'EditorSlideUpload',
  methods: {
    httpRequest(data){
      let _this = this
      let rd = new FileReader() // 创建文件读取对象
      let file = data.file
      rd.readAsDataURL(file) // 文件读取装换为base64类型
      rd.onloadend = function (e) {
        // this指向当前方法onloadend的作用域, this.result就是文件的base64, 这里可自由处理
        _this.$emit('successCBK', e.currentTarget.result)
      }
    }
  }
}
</script>

利用httpRequest覆盖默认的上传行为,自己定义上传方法,其他插件或者原生可举一反三,文件转文件流即可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。