图片上传存为base64，通过浏览器把base64字符串下载为图片

删减版请点击这里

1、前端是 手机端app 用mui组件上传图片

//点击上传按钮触发此事件，随便写个button按钮就行
getSheet:function(){
	plus.nativeUI.actionSheet({
		title:"请选择",
		cancel:"取消",
		buttons:[{title:"拍照"},{title:"相册选取"}]
	}, function(e){
		var index = e.index;
		switch (index){
			case 0:
				text += "取消";
				break;
			case 1:
				//调用手机拍照的方法
				app.getImage();
				break;
			case 2:
				//调用选择手机相册的方法
				app.getGalleryImage();
				break;
		}
	});
},
//调用手机拍照的方法
getImage: function() {
	var cmr = plus.camera.getCamera();
	cmr.captureImage(function(p) {
		plus.io.resolveLocalFileSystemURL(p, function(entry) {
			var gentry={fileName: entry.name,filePath:p,path:entry.toLocalURL()};
			app.uploadFile(gentry);
		}, function(e) {
			
		});
	}, function(e) {
		
	}, {
		filename: "_doc/camera/",
		index: 1
	});
},
//调用选择手机相册的方法
getGalleryImage: function() {
	plus.gallery.pick(function(p){
		var name = p.substr(p.lastIndexOf('/')+1);
		var gentry={fileName: name,filePath:p,path:p};
		app.uploadFile(gentry);
	}, function(e){
		mui.toast('取消选择图片');
	}, {filter:'image'});
},
//选中图片之后点击确认，直接把图片上传到服务端
uploadFile:function(gentry){
	// 上传服务器
	plus.nativeUI.showWaiting();
	var task = plus.uploader.createUpload(serverUrl+"/gysupload/gysUploadFile",{ method:"POST" },function (t, status) {
		plus.nativeUI.closeWaiting();
		// 上传完成
		if ( status == 200 ) { 
			var resText = JSON.parse(t.responseText);
			if(resText.code==200 || resText.code=='200'){
				app.filelists.push(resText.data);
				mui.toast("上传成功");
			}else{
				mui.toast(resText.msg);
			}
		} else {
			mui.alert("上传失败：" + status, '失败', '关闭', null, 'div');
		}
	});
	task.setRequestHeader('Authorization', "Bearer "+localStorage.getItem('token'));
	task.addFile(gentry.filePath,{key:gentry.fileName});
	// task.addData("recid",app.school.recid);
	task.addData("module",`xxda_jsgs,${app.school.recid}`);
	task.start();
},
//加载图片列表
getFileList:function(){
	ajaxutil(serverUrl+"/gysupload/getGysuploadList",{
		data: {
			jsondata: JSON.stringify({fileModule:'xxda_jsgs',spjyzId:app.school.recid})
		},
		type: 'post',//HTTP请求类型
		dataType: 'json',
		timeout:50000,//超时时间设置为20秒；
		success: function(data) {
			console.log(data);
			if(data.code==200){//获取列表成功成功
				if(data.data!=null && data.data!=''){
					
					app.filelists=data.data;
				}
			}else{
				mui.toast('获取附件失败：'+data.msg);
			}
		},
		error: function(xhr, type, errorThrown) {
			//异常处理；
			mui.toast('获取附件失败！');
		}
	});
},
//因为展示的是图片列表，此处给加了个点击列表中展示的名字，加载图片的功能，其实就是个下载图片，给用户展示
displayFile: function(gentry) {
	plus.nativeUI.showWaiting();
	var task = plus.downloader.createDownload(serverUrl + "/gysupload/gysDownloadFile?recid="+gentry.recid+"",{method: 'POST',filename:"_doc/file/"}, function(d,status){
        plus.nativeUI.closeWaiting();
        if (status == 200){
            plus.runtime.openFile(d.filename, {}, function(e){
                mui.alert( "无法打开此文件："+e.emssage,"警告" );
            });
        } else {
            mui.alert("下载文件失败: " + status, "警告");
        }
    });
    task.setRequestHeader('Authorization', "Bearer "+localStorage.getItem('token'));
    task.start();
},
//删除图片
deleteFile:function(index){
	ajaxutil(serverUrl+"/gysupload/gysRemoveFile",{
		data: {
			recid: app.filelists[index].recid
		},
		type: 'post',//HTTP请求类型
		dataType: 'json',
		success: function(data) {
			if(data.code==200){//成功
				app.filelists.splice(index,1);
			}else{
				mui.toast('删除附件失败：'+data.msg);
			}
		},
		error: function(xhr, type, errorThrown) {
			//异常处理；
			mui.toast('删除附件异常！');
		}
	});
},

2、java服务端把上传的图片用base64保存以及点击的时候怎么把base64字符串通过浏览器下载

package com.ruoyi.mobile.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.ruoyi.common.utils.IdUtils;
import com.ruoyi.common.utils.SecurityUtils;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.framework.web.controller.BaseController;
import com.ruoyi.framework.web.domain.AjaxResult;
import com.ruoyi.mobile.utils.Const;
import com.ruoyi.mobile.utils.JsonUtils;
import com.ruoyi.spzs.domain.SpzsGysUpload;
import com.ruoyi.spzs.service.ISpzsGysUploadService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.MultipartResolver;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLEncoder;
import java.time.Instant;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;

/**
 * 手机端上传附件，上传至spzs_gys_upload表，存为base64，外键为spjyz_id
 */
@Api("附件信息spzs_gys_upload")
@Controller
@RequestMapping("/mobile/gysupload")
public class GysUploadController extends BaseController {
    @Autowired
    private MultipartResolver multipartResolver;
    @Autowired
    private ISpzsGysUploadService iSpzsGysUploadService;

    @ApiOperation("附件列表（不分页）")
    @RequestMapping(value = "/getGysuploadList", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8")
    public @ResponseBody
    AjaxResult getAttachmentList(HttpServletRequest request, HttpServletResponse response){
        try{
            String jsondata=request.getParameter("jsondata");
            if (StringUtils.isEmpty(jsondata))
            {
                return AjaxResult.error(Const.MOBILE_PARAMETER_NULL_DESCRIPTION);
            }
            SpzsGysUpload spzsGysUpload = JsonUtils.json2pojo(jsondata,SpzsGysUpload.class);
            LambdaQueryWrapper<SpzsGysUpload> lqw = new LambdaQueryWrapper<SpzsGysUpload>();
            if (StringUtils.isEmpty(spzsGysUpload.getSpjyzId()))
            {
                return AjaxResult.error(Const.MOBILE_PARAMETER_NULL_DESCRIPTION);
            }
            if (StringUtils.isEmpty(spzsGysUpload.getFileModule()))
            {
                return AjaxResult.error(Const.MOBILE_PARAMETER_NULL_DESCRIPTION);
            }
            lqw.eq(SpzsGysUpload::getSpjyzId,spzsGysUpload.getSpjyzId());
            lqw.eq(SpzsGysUpload::getFileModule,spzsGysUpload.getFileModule());
            List<SpzsGysUpload> list = iSpzsGysUploadService.list(lqw);
            return AjaxResult.success(list);
        }catch(Exception e){
            e.printStackTrace();
            return AjaxResult.error(Const.MOBILE_ERROR_DESCRIPTION+"："+e.getMessage());
        }
    }

    @ApiOperation("上传附件")
    @RequestMapping(value = "/gysUploadFile", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8")
    public @ResponseBody AjaxResult uploadFile(HttpServletRequest request, HttpServletResponse response)
    {
        try {
        	//这原本是2个参数，但是另一个参数死活传不进来，所以就合并成一个参数，用“，”隔开
            String fileModule=request.getParameter("module");
            String[] split = fileModule.split(",");
            SpzsGysUpload spzsGysUpload = new SpzsGysUpload();
            boolean istrue = false;
            // 判断 request 是否有文件上传,即多部分请求
            if (multipartResolver.isMultipart(request)) {
                // 转换成多部分request
                MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) multipartResolver.resolveMultipart(request);
                // 取得request中的所有文件名
                Iterator<String> iter = multiRequest.getFileNames();
                while (iter.hasNext()) {
                    // 记录上传过程起始时的时间，用来计算上传时间
                    int pre = (int) System.currentTimeMillis();
                    // 取得上传文件
                    MultipartFile file = multiRequest.getFile(iter.next());
                    if (file != null) {
                        // 取得当前上传文件的文件名称
                        Instant instantnow = Instant.now();
                        spzsGysUpload.setRecid(IdUtils.fastSimpleUUID());
                        byte[] b = file.getBytes();
                        //定义一个BASE64Encoder
                        BASE64Encoder encode = new BASE64Encoder();
                        //将byte[]转换为base64
                        String base64 = encode.encode(b);
                        if(base64.indexOf("data:image")!=0){
                        	//此处添加这个image头之后，可以直接返回给前端，前端直接把这个内容放在img标签src属性内就好，直接就能展示  <img :src="内容"/>
                            base64 = "data:image/jpeg;base64," + base64;
                        }
                        spzsGysUpload.setFileContent(base64);
                        spzsGysUpload.setFileSize(String.valueOf(b.length));
                        String fileName = UUID.randomUUID().toString().replaceAll("-", "") + ".jpg";
                        String newFileName = System.currentTimeMillis()+"."+fileName.split("\\.")[fileName.split("\\.").length - 1];
                        spzsGysUpload.setFileName(newFileName);
                        spzsGysUpload.setFileType("jpg");
                        spzsGysUpload.setFileTime(Date.from(instantnow));
                        spzsGysUpload.setFileModule(split[0]);
                        spzsGysUpload.setSpjyzId(split[1]);
                        spzsGysUpload.setRemark(file.getOriginalFilename());
                        spzsGysUpload.setCreater(SecurityUtils.getUsername());
                        spzsGysUpload.setCreateTime(Date.from(instantnow));
                        spzsGysUpload.setUpdater(SecurityUtils.getUsername());
                        spzsGysUpload.setUpdateTime(Date.from(instantnow));
                        istrue = iSpzsGysUploadService.save(spzsGysUpload);
                    }
                }
            }
            if(istrue){
                return AjaxResult.success(spzsGysUpload);
            }else{
                return AjaxResult.error("上传失败!");
            }
        } catch (Exception e) {
            e.printStackTrace();
            logger.error("上传失败：", e);
            return AjaxResult.error(Const.UPLOAD_FILE_NULL_DESCRIPTION+"："+e.getMessage());
        }
    }

    @ApiOperation("下载附件")
    @RequestMapping(value = "/gysDownloadFile", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8")
    public void downloadFile(HttpServletRequest request, HttpServletResponse response) throws Exception
    {
        String recid = request.getParameter("recid");
        if (StringUtils.isEmpty(recid))
        {
            return;
        }
        SpzsGysUpload spzsGysUpload = iSpzsGysUploadService.getById(recid);
        if(spzsGysUpload==null || StringUtils.isEmpty(spzsGysUpload.getFileContent())){
            return;
        }
        String fileContent=spzsGysUpload.getFileContent().replace("data:image/jpeg;base64,","");
        //设置响应头和客户端保存文件名
        response.setContentType("text/html;charset=UTF-8");
        response.setHeader("Content-Disposition", "inline;filename=" + URLEncoder.encode(spzsGysUpload.getRemark(),"UTF-8"));
        //用于记录以完成的下载的数据量，单位是byte
        BASE64Decoder decoder = new BASE64Decoder();
        //Base64解码
        byte[] bytes = decoder.decodeBuffer(fileContent);
        ByteArrayInputStream  is=new ByteArrayInputStream(bytes);
        OutputStream os = null;
        try {
            os = response.getOutputStream();
            byte[] flush=new byte[5];
            int len=-1;
            while((len=is.read(flush))!=-1){//这里是写入程序
                os.write(flush,0,len);//这一步是将程序写入到文件    这里一定要记住文件流一定要释放
            }
            os.flush();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e){
            e.printStackTrace();
        } finally {
            try {
                if(os!=null) {
                    os.close();
                }
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }

    @ApiOperation("删除附件")
    @RequestMapping(value = "/gysRemoveFile", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8")
    public @ResponseBody AjaxResult removeFile(HttpServletRequest request, HttpServletResponse response){
        try{
            String recid = request.getParameter("recid");
            if (StringUtils.isEmpty(recid))
            {
                return AjaxResult.error(Const.MOBILE_PARAMETER_NULL_DESCRIPTION);
            }
            boolean istrue = iSpzsGysUploadService.removeById(recid);
            if(istrue){
                return AjaxResult.success();
            }else{
                return AjaxResult.error("删除失败");
            }
        }catch(Exception e){
            e.printStackTrace();
            return AjaxResult.error(Const.MOBILE_ERROR_DESCRIPTION+"："+e.getMessage());
        }
    }

}

3、总结

其实这就是我写项目的时候遇到的，给自己以后写项目做个参考，要是有不同的意见的欢迎指正