Vue表单上传带多张图片上传加预览，支持手机拍照上传

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

PC端实现效果：

手机端效果：

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

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

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

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

<div class="formFieldWrap">
	    <label class="field-title contactEmailField" for="front_img">上传身份证正面: <span class="tipsLog">(不能为空)</span></label>
	    <input id="front_img" type="file" class="file" accept="image/*"  @change="frontChange()"/>
	    <div id="front" class="photo"></div>
</div>

预览框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('<img class="photo" src="' + this.result + '" alt="" />');
            })
            if(null != file){
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    vm.frontCardImage = e.target.result;
                }
            }
            //打印一下
            console.log(vm.frontCardImage);
        },

由于前端较菜，直接获取的是预览框的图、之前传File一直传不成功。获取到的类型是File，可以看上图。转成Base64后就可直接通过Json传输了。

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;
    }

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