elementUI + Vue 实现图片上传且可预览，以base64字符串上传到服务器

想要解决的问题

• 上传图片且可预览(这里只上传单个图片)、不是一上传图片就直接传给服务器，而是随表单提交再一起传到服务器。(这里将图片转成base64以字符串的形式传输给服务器)

我的需求

• 需要将图片转成base64字符串的形式，作为请求的一个参数传给后端。后端根据该字段进行图片的存储。

后端对图片的处理

• 我这里的后端处理图片的方式是：给图片生成个随机不重复的名字加上.jpg 或.png后缀命名，然后存储到其硬盘上。最后将图片存放的具体位置存到数据库对应表的字段中，如：cover/AEJISJW25W.jpg
• 前端获取并显示图片，即只要将服务器地址 + 字段值就行了

例如：
<img src="http://www.jerrybro.cn/cover/AEJISJW25W.jpg" />

• 另外的做法：后端直接将已经转成base64字符串形式的图片，存在数据库表的字段中。不知道能不能放下这么长的字符串（哈哈！），所以此方法对于图片有要求，图片需要尽量小，不然转成的base64太长了！

技术栈

• Element-UI 和 Vue

说明

• 这里借用了Element-UI的组件及样式、再加以改造而成。
• 适用于小项目（正常来说是将图片上传到阿里云OSS），将图片存放在自己的服务器(数据库/硬盘)上。
• 注意：最好对图片进行检测下，只上传比较小的图片，不然转出的base64一长串(太长了！！)
• 具体样式可以自己调整。

具体操作 (代码)

• 此处以SPA的vue组件的形式写的、自己在 main.js 中引入element-ui，即如下几行代码。

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

<template>
  <div class="form-container">
    <el-form :model="form" label-width="80px">
      <el-form-item label="封面">
        <el-upload
          class="avatar-uploader"
          action=""
          :on-change="imgBroadcastChange"
          accept=