本文共 3781 字，大约阅读时间需要 12 分钟。

Vue实现表单上传带图片，不多BB直接上效果图！

PC端实现效果：

前言：非专业前端，写的界面比较丑。大家大致看看就行。因为公司新项目需要做一个新平台。小公司人力有限，在云端界面功能开发又再一次一个人扛下了所有。从前端到后端一条龙！Pc端效果主要是在电脑上，手机网页端主要以小程序的形式展示。后面或许还是有App端的开发。

这个功能主要是一个预约申请的功能。主要需要上传一些信息，字段如姓名、身份证号等；照片需要上传身份证照片、人半身照等照片。以上就是我的效果图。

• 今天主要想记录的就是如何实现表单上传带图片。之前写过安卓端的，由于安卓端也是用的Java写的，所以在转类型方面还是比较熟悉。之前用Okhttp3传输、图片一直用的byte数组传的。解析传输接收都很简单。但是前端就比较菜了、在实现功能的过程中要是遇到了诸多问题。直接上方案：

html代码（界面比较丑、其他的Css就不传了，需要的可私信）：

   
	    
    上传身份证正面: (不能为空)	    
    	    
    
   

预览框CSS代码：

.photo{    width:300px;    height:160px;    margin:auto;    margin-top:10px;    background:#cfeab2;    border-radius:5px;}//后面几个 #reverse, #person, #relationshipEvidence是另外几个图片上传按钮和展示.photo, #front, #reverse, #person, #relationshipEvidence{    width:300px;    height:160px;    border-radius:5px;}

可以看看具体展示效果：

JS代码（File转Base64）：

frontChange:function() {            var file = $("#front_img").get(0).files[0];            //打印一下              console.log(file);                var r = new FileReader();            r.readAsDataURL(file);            $(r).load(function () {                $('#front').html('');            })            if(null != file){                var reader = new FileReader();                reader.readAsDataURL(file);                reader.onload = function (e) {                    vm.frontCardImage = e.target.result;                }            }            //打印一下            console.log(vm.frontCardImage);        },

JS数据绑定ajax上传：

//单独的图片处理方法@Override    public int savePersonImage(PersonQuery personQuery) {        if(null != personQuery && null != personQuery.getFrontCardImage() && null != personQuery.getReverseCardImage()                && null != personQuery.getRelationImage() && null != personQuery.getPersonImage()){             //根据需求定义存储路径和文件名            String imgName = UuidUtil.randomUUID() + ".jpg";            String personName = personQuery.getPersonName();            //获取姓名作为个人图片存储的文件夹            String shortName = CspUtils.getPingYin(personName);            //获取当前项目路径            String cspDir = CspUtils.getRealPath();            //存储图片的绝对路径            String folderDir = cspDir + "upload/" + shortName;            //1、存储图片            String frontCardImageName = "front_card_img"+imgName;            boolean fFlag = CspUtils.base64ToFile(personQuery.getFrontCardImage(), folderDir, frontCardImageName);            if(!fFlag){               return Constants.ResultStatus.FAIL;            }            //2、数据记录入库等操作           //TODO                 return Constants.ResultStatus.OK;        }

根据传入的Base64字节流转为文件存储到对应路径中去。

public static boolean base64ToFile(String baseStr, String url, String fileName){        if(null == baseStr || "".equals( baseStr ) || null == url || "".equals( url ) || null == fileName || "".equals( fileName )){            return false;        }        String base64Data =  baseStr.split(",")[1];        Base64.Decoder decoder = Base64.getDecoder();        byte[] bytes = decoder.decode(base64Data);        /**         * .字节流转文件         */        FileOutputStream fos = null;        if (!new File(url).isDirectory()){            new File(url).mkdirs();        }        try {            fos = new FileOutputStream(url+"/"+fileName);            fos.write(bytes);            log.info("成功啊！");            return true;        } catch (IOException e) {            e.printStackTrace();        } finally {            if (fos != null){                try {                    fos.close();                } catch (IOException e) {                    e.printStackTrace();                }            }        }        return false;    }

• 以上便是表单上传、含图片和预览。从前端上传、预览、传输、存储、入库等一系列操作。网上参考了一堆，没有找到合适的方法。等有时间继续讲讲另一种文件上传的方法吧。太久没写博客了，思路有点混乱。望见谅。如有错误还望指正。本博客旨在记录、可能方法并非最佳方案、仅供参考。

转载地址：http://pilrn.baihongyu.com/