Element-UI 中 Upload 组件的使用

(第一次写CSDN，写的不好见谅！)

1. 我们在Element官网可以查看 Upload 的相关参数配置，但是我想很多人不知道 action 的实现原理，我也不知道。但是我们又想使用Element-UI Upload 组件实现图片上传，怎么办呢？我也看了很多文章，下面说说我的理解和解决办法，欢迎讨论。

<el-upload class="upload-demo" drag multiple action="#" 
    :http-request="Upload_file" 
    :before-upload="beforeUpload"
    >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
        </div>
        <template #tip>
            <div class="el-upload__tip">
                只能上传 jpg/png 文件，且不超过 500kb
            </div>
        </template>
</el-upload>

2. 上面的代码直接复制 Upload 的组件，配置了 action='#' ；( http-request：覆盖默认的上传行为，可以自定义上传的实现，所以这里我们不需要配置这个action 地址)

3. 我们在这个组件中，配置了两个属性：before-upload 与 http-request，作用分别是：

        3.1 before-upload：做上传前的一些校验，比如 文件类型，文件大小，能接收 file 参数，相信大家输出 file 应该能懂的。

        3.2 http-request：这个就是我们处理上传的文件的代码了。我们获取用户上传的图片信息，肯定是要保存到数据库中的，那么，就得使用 file 的 base64 类型。

/* 自定义上传文件 */
function Upload_file(data){       // data是上传的文件信息，里面有我们想要的file属性
    let reader = new FileReader() // 创建文件读取对象
    let file = data.file
    reader.readAsDataURL(file) // 文件读取转换为base64类型
    reader.onloadend = function (e) {
        console.log(e.target.result);
    }
}

4. 控制台输出 base64 文件数据：

 5. 拿到这个数据，后面的就不用我说啦，该校验校验，存数据库的使用 text 格式，就能解决通过 Upload 组件，我们自己拿到数据了。

tips:有啥不对的，欢迎指正哈~