el-upload能不能上传base64格式的
时间: 2023-07-19 20:21:00 浏览: 102
是的,`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编码的图片数据可能比较大,因此上传的速度会比较慢,而且会占用较多的服务器资源。如果要上传大量的图片,最好还是使用普通的文件上传方式。
阅读全文