前言
项目中希望我能上传图片,并对图片进行处理,并在预览框显示结果。
对此我采用vue框架中element组件的upload来进行实现:
官方示例demo:Upload 上传
在使用的过程我需要将上传的JPG格式FILE文件转换为base64字符串用于其余业务逻辑处理,而在这过程中我遇到了麻烦(由于自身对于js不熟练),困扰了我数个小时。
这个故障我描述为FileReader.onload
绑定的回调函数内无法用this
来引用全局变量,对该变量的赋值对外无效
由于印象深刻,我特意记录下来,本篇将分为两部分,一部分是我整套流程中可以通用的代码,另一部分是我遇到这个故障的思考路径和最终解决方案。
提前总结:函数内部和外部所用的this指代内容不相同,因此需要用一个其他变量名传递进去。
功能代码
这段代码的实际功能等效于,上传并预览图片,但在预上传函数中,可以获取到图片的字符串格式,在某些情况下或许有用。
控件部分:
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imgsrc" :src="'data:image/jpeg;base64,' + imgsrc" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
变量部分:
return {
imgsrc:'',
}
属性部分:
<style scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position<