直入主题，上代码（其实用的还是FileReader）
主要方法

handleRemove(file, fileList) {
      console.log(file); 
      
      var reader = new FileReader();
      reader.readAsDataURL(file.raw); // 一定要传入file格式  
      reader.onload = () => {
        console.log("file 转 base64结果：" + reader.result);
      };
      reader.onerror = function(error) {
        console.log("Error: ", error);
      };
},

vue组件

<!--  -->
<template>
  <div>
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-change="handleRemove"
      multiple
      :limit="3"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file);
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        console.log("file 转 base64结果：" + reader.result);
      };
      reader.onerror = function(error) {
        console.log("Error: ", error);
      };
    },
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>

注意：
今天在使用Vue进行文件上传的代码编写时，发现报错：
Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."
`
显然，是传入的file对象出了问题，根据报错提示，我们应该传入一个Blob对象。也就是说，file不是Blob对象

我们使用console.log(file)进行调试输出：

看, raw这个属性写了个大大的File

把raw这个File对象传入即可

OK啦！！！

一、前端图片转Base64

获取图片，将图片转为Base64字符串，AJAX提交到后台进行处理，前端使用了Vue基础。但是这种做法会比较复杂，后续会使用vant框架实现。

<!--上传图片-->
<div style="width: 90%;margin-left: 5%;margin-top: 30px">
        <div class="pics" v-for='(value, key) in imgs' style="text-align:center;float: left;width: 19%;">
            <div class="onepicdiv" style="float:left;width: 100%;">
                <div>
                    <img class="onepic" :id=key :src="getObjectURL(value)" style="width: 85%;" @click="showImgs(value)">
                </div>
                <div @click="delImg(key)" style="color: #999999;width: 100%;font-size: 13px;color: #999999;position: relative;top: -63px;left: 26px">
                    <van-icon name="close" color="rgb(0,0,0)"/>
                </div>
            </div>
        </div>
        <div v-if="imgLen>=5 ? false : true">
            <div class="addpicture">
                <input id="myfile" type="file" @change="addImg" ref="inputer" multiple accept="image/*"
                       style="opacity:0;width: 100%;"/>
            </div>
        </div>
        <div style="font-size: 10px;padding-top: 40px;color: #999999">&nbsp;&nbsp;{{imgLen}}/5</div>
    </div>
    
<!--放大图片时被放大的图片和图片列表之间的遮罩层-->
<div id="showpicmask">
    <div v-show="show" @click="back()"
         style="position: fixed;z-index: 100;height: 100vh;width: 100%;background-color: rgba(0,0,0,0.95) ">
    </div>
</div>

<!--被放大的图片-->
<div id="showpic">
    <div v-show="show" @click="back()"
         style="position: fixed;z-index: 101;width:100%;height: 100vh;display: flex;float: left;align-items: center;justify-content: center;">
        <img :src="picpath" style="width: 100vw;">
    </div>
</div>

<script>
//上传图片
addImg(event) {
    let inputDOM = this.$refs.inputer;
    // 通过DOM取文件数据
    this.fil = inputDOM.files;

    let oldLen = this.imgLen;
    let len = this.fil.length + oldLen;
    if (len > 5) {
        alert('最多可上传5张，您还可以上传' + (5 - oldLen) + '张');
        return false;
    }
    for (let i = 0; i < this.fil.length; i++) {
        let size = Math.floor(this.fil[i].size / 1024);
        if (size > 3 * 1024) {
            layer.msg('请选择3M以内的图片');
            return false;
        }
        for(key in this.imgs){
            if(key == this.fil[i].name){
                layer.msg("请勿上传同一张图片")
                return
            }
        }
        this.imgLen++;
        this.$set(this.imgs, this.fil[i].name , event.target.files[i]);

        //转换为base64
        let self = this;
        let reader = new FileReader();
        reader.readAsDataURL(event.target.files[i]);
        if (size > 1024) {//图片大于1M，进行压缩
            if (typeof (FileReader) === 'undefined') {
                console.log("当前浏览器内核不支持base64图标压缩");
                //调用上传方式  不压缩
            } else {
                var file = event.target.files[i];
                if (!/image\/\w+/.test(file.type)) {
                    alert("请确保文件为图像类型");
                    return false;
                }
                //压缩图片
                reader.onload = function (event) {
                    if (reader.readyState === 2) {
                        let image = new Image()     //新建一个img标签（不嵌入DOM节点，仅做canvas操作)
                        image.src = event.target.result;    //让该标签加载base64格式的原图
                        image.onload = function () {
                            let canvas = document.createElement('canvas'), //创建一个canvas元素
                                context = canvas.getContext('2d'),    //context相当于画笔，里面有各种可以进行绘图的API
                                imageWidth = image.width / 2,    //压缩后图片的宽度，这里设置为缩小一半
                                imageHeight = image.height / 2,    //压缩后图片的高度，这里设置为缩小一半
                                data = ''    //存储压缩后的图片
                            canvas.width = imageWidth    //设置绘图的宽度
                            canvas.height = imageHeight    //设置绘图的高度
                            //使用drawImage重新设置img标签中的图片大小，实现压缩。drawImage方法的参数可以自行查阅W3C
                            context.drawImage(image, 0, 0, imageWidth, imageHeight)
                            //使用toDataURL将canvas上的图片转换为base64格式
                            data = canvas.toDataURL('image/jpeg')
                            var st = data.indexOf(',');
                            var stnew = parseInt(st) + 1;
                            data = data.substring(stnew);
                            self.$set(self.filelist, self.fil[i].name, data);
                        };
                    }
                }
            }
        } else {
            reader.onload = function (event) {
                self.headImg = event.target.result; //img base64
                var st = self.headImg.indexOf(',');
                var stnew = parseInt(st) + 1;
                self.headImg = self.headImg.substring(stnew);
                self.$set(self.filelist, self.fil[i].name, self.headImg);
            }
        }
    }

},
getObjectURL(file) {
    const that = this;
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
},
//删除图片
delImg(key) {
    const that = this;
    this.$delete(that.filelist, key);
    this.$delete(this.imgs, key);
    this.imgLen--;
},
//放大图片
showImgs(value) {
    var url = this.getObjectURL(value);
    picmask.show = true
    showpic.show = true
    showpic.picpath = url
},
</script>

二、后台Base64转图片

后台获取前端Base64字符串，这里在后台转换为图片，存放到指定目录，并将新定义的图片名保存至数据库

//DataObject.java用于存储key-value类型数据的数据结构
//DataStore.java用于存储列表格式数据的数据结构。
//图片处理
DataObject objfile= DataObject.parseJSON(files);
DataStore fileds = DataStore.getInstance();
Set<String> keySet = objfile.keySet();// vdo里的键都是string
Iterator<String> it = keySet.iterator();// 开始遍历
String key;// vdo的键
Object value;// 值（数据类型待判断）
int n=0;
while (it.hasNext()) {
    key = it.next();
    value = objfile.get(key);
    if (value instanceof String) {
        //System.out.println("key=="+key +",value="+value);
        fileds.put(n, "imgname", key);
        fileds.put(n, "imgbase", value);
    } else {
        throw new BizException("files不是一个String类型的值");
    }
    n++;
}
if(fileds.rowCount()>0){
    DataObject returnobj = DataObject.getInstance();
    DataStore urlds = DataStore.getInstance();
    for (int j = 0; j < fileds.rowCount(); j++) {
        String imgStr = fileds.getString(j, "imgbase");
        String FILEPATH = picurl + suggestImgs;
        Calendar tempewmscsj = Calendar.getInstance();
        long sjid = tempewmscsj.getTimeInMillis();
        String idstr = String.valueOf(sjid);
        String nowstr = DateUtil.getCurrentTime();
        String fileName = "img_" + nowstr + "_" + idstr + ".jpg";
        fileNames = fileNames + ";" + fileName;
        //对字节数组字符串进行Base64解码并生成图片
        String imgUrl = "";
        //图像数据为空
        if (StringUtils.isBlank(imgStr)) {
            returnobj.put("retuendata", imgUrl);
        }
        BASE64Decoder decoder = new BASE64Decoder();
        byte[] b = decoder.decodeBuffer(imgStr);
        for (int i = 0; i < b.length; ++i) {
            //调整异常数据
            if (b[i] < 0) {
                b[i] += 256;
            }
        }
        //文件目录不存在则创建
        File outFile = new File(FILEPATH);
        if (!outFile.exists()) {
            outFile.mkdirs();
        }
        //文件最终的存储位置
        File dest = new File(FILEPATH + File.separator + fileName);
        //判断目标文件所在的目录是否存在
        if (!dest.getParentFile().exists()) {
            //创建目录
            if (!dest.getParentFile().mkdirs()) {
                returnobj.put("retuendata", imgUrl);
            }
        }
        //新生成的图片
        imgUrl = FILEPATH + File.separator + fileName;
        //这种写法不需要flush或者close 会自动关闭 FileOutputStream 实现了java中的java.lang.AutoCloseable接口。
        try (OutputStream out = new FileOutputStream(FILEPATH + File.separator + fileName);) {
            out.write(b);
        } catch (Exception e) {
            //logger.info("Base64Util GenerateImage e:" + e.getLocalizedMessage());
        } finally {
            returnobj.put("retuendata", imgUrl);
        }
        urlds.put(j, "imgurl", returnobj.getString("retuendata"));
    }
}
//数据库中存放新定义的图片名等信息
...

三、前端Base64转图片

如果选择第二步在后台直接存储Base64字符串到数据库，则可以在前端把Base64转为图片

let file = img.src; // 把整个base64给file
let name = filename + ".png"; // 定义文件名字（例如：cober.png）
var type = "image/png"; // 定义图片类型（canvas转的图片一般都是png，也可以指定其他类型）
let conversions = base64ToBlob(file, type); // 调用base64转图片方法
 
// conversions 就是转化之后的图片文件，
 
function base64ToBlob(urlData, type) {
    let arr = urlData.split(',');
    let mime = arr[0].match(/:(.*?);/)[1] || type;
    // 去掉url的头，并转化为byte
    let bytes = window.atob(arr[1]);
    // 处理异常,将ascii码小于0的转换为大于0
    let ab = new ArrayBuffer(bytes.length);
    // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
    let ia = new Uint8Array(ab);
    for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {
        type: mime
    });
},

单张图片转Base64

<script>
    methods: {
		//异步执行
		imageUrlToBase64() {
			//一定要设置为let，不然图片不显示
			let image = new Image();
	
			//解决跨域问题
			image.setAttribute('crossOrigin', 'anonymous');
			
			let imageUrl = "http://img1.imgtn.bdimg.com/it/u=4012470373,3540768040&fm=26&gp=0.jpg";
			image.src = imageUrl
	
			let that = this;
			//image.onload为异步加载
			image.onload = () => {
				var canvas = document.createElement("canvas");
				canvas.width = image.width;
				canvas.height = image.height;
				var context = canvas.getContext('2d');
				context.drawImage(image, 0, 0, image.width, image.height);
				
				var quality = 0.8;
				//这里的dataurl就是base64类型
				var dataURL = canvas.toDataURL("image/jpeg", quality);//使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
			
			}
		},
	}
</script>

多张图片转Base64

<script>
  data() {
    return {
   	 base64Datas: [],
    }
	methods: {
		imageUrlToBase64(){
			let data = [
				"http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png",
				"http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png",
				"http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png"
			]
			this.imageUrlToBase64(data, 1, data.length);
		},
	
		//采用递归同步执行
		onloadImg(data, i, len) {
	
			//一定要设置为let，不然图片不显示
			let image = new Image();
	
			//解决跨域问题
			image.setAttribute('crossOrigin', 'anonymous');
			
			let imageUrl = "http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png";
			image.src = imageUrl
	
			let that = this;
			//image.onload为异步加载
			image.onload = () => {
				var canvas = document.createElement("canvas");
				canvas.width = image.width;
				canvas.height = image.height;
				var context = canvas.getContext('2d');
				context.drawImage(image, 0, 0, image.width, image.height);
				
				var quality = 0.8;
				//这里的dataurl就是base64类型
				var dataURL = canvas.toDataURL("image/jpeg", quality);//使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
				
				//数组存放图片base64
				that.base64Datas.push(dataURL);
				
				//递归执行图片url转base64
				i = i + 1;
				if (i <= len) {
					that.onloadImg(data1, i, len)
				}
			
			}
		},
	}
</script>