如何实现图片预览的格式、通过预留接口发给后台的格式

提示：学习vue、elementUI中做的一个笔记

---

前言

刚开始学习编程时，在想 input 标签如何把选择的文件上传给服务器，或者需要如何处理才能上传给服务器，通过这次的项目实战，算是有了一些了解。

---

一、第一种方法

通过上传图片的base64字符串(而且字符串还必须是data:image/png;base64、图片转base64字符串)

代码1： userAvatar.vue

<template>
	<img v-else :src="avatar" class="the_img" alt=""/>
	<input ref="iptRef" accept="image/*" style="display: none" type="file" @change="onFileChange"/>
	<el-button icon="el-icon-plus" type="primary" @click="chooseImg">选择图片</el-button>
    <el-button :disabled="avatar === ''" icon="el-icon-upload" type="success" @click="upLoadFn">上传头像</el-button>
</template>
<script>
import {
   updateUserAvatarAPI} from '@/api'
export default {
   
	name: 'UserAvatar',
	data () {
   
		return {
   
			avatar: '' // 保存图片链接/base64字符串
		}
	},
	methods: {
   
    // 选择图片->点击事件->让选择框出现
    chooseImg () {
   
		this.$refs.iptRef.click()
	},
	// 在选择框中选择图片后触发的改变事件
    onFileChange (e) {
   
		// 获取用户选择的文件列表（伪数组）
      	const files = e.target.files
      	if (files.length === 0) {
   
	        // 证明刚刚文件选择窗口打开了，但是它一个文件都没选择然后点击了确定关闭选择弹窗
	        this.avatar = ''
	    } else {
   
	      	const fr <