el-upload上传组件获取文件,file转为base64

饿了么上传控件获取base64格式数据

<el-upload ref='upload' accept='image/jpeg,image/gif,image/png'
                       action='#'
                       :auto-upload='false'
                       class='upload-demo'
                       :limit='1'
                       list-type='picture-card'
                       :on-change='onChange'
                       :on-exceed='handleExceed'>

方法写在onChange事件中

onChange(file) {
      //把图片转成base64编码
      const a = new FileReader()
      a.readAsDataURL(file.raw)
      a.onload = (e) => {
        let base64 = e.target.result
        console.log(base64)//base64数据
      }

    },

注意 入参为file.raw 否则会报错

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
是的,`el-upload`组件可以上传Base64格式的图片。你只需要将Base64编码的图片数据作为参数,传入`handleUpload`方法即可。 下面是一个示例: ```html <template> <el-upload ref="upload" action="/upload" :auto-upload="false" > <el-button slot="trigger">选择图片</el-button> </el-upload> </template> <script> export default { mounted() { const uploadComp = this.$refs.upload const base64Data = 'data:image/png;base64,iVBORw0KG...' // 这里是Base64编码的图片数据 const file = this.base64ToFile(base64Data, 'test.png') uploadComp.handleUpload(file) }, methods: { base64ToFile(data, filename) { const arr = data.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, { type: mime }) } } } </script> ``` 在上面的示例中,我假定了要上传Base64编码的图片数据为`'data:image/png;base64,iVBORw0KG...'`,文件名称为`'test.png'`,文件类型为`'image/png'`。在`mounted`钩子函数里,我首先调用了`base64ToFile`方法,将Base64编码的图片数据转换成了File对象,然后将这个File对象作为参数,传入了`handleUpload`方法。 需要注意的是,由于Base64编码的图片数据可能比较大,因此上传的速度会比较慢,而且会占用较多的服务器资源。如果要上传大量的图片,最好还是使用普通的文件上传方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值