用element组件配合FileReader实现上传图片并显示，以及过程中遇到的故障onload回调函数中this传递变量失败

前言

项目中希望我能上传图片，并对图片进行处理，并在预览框显示结果。
对此我采用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<