有時候文件上傳, 并不需要馬上傳給后臺,而是需要先轉 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
覆蓋默認的上傳行為,自己定義上傳方法,其他插件或者原生可舉一反三,文件轉文件流即可。