java + iview + vue 实现多文件上传到本地服务器

1、前端页面

<Modal width="800" v-model="modal" :title="'批量导入照片' " >
            <i-Form :model="saveform" ref="saveform" :rules="ruleValidate" :label-width="90"   >
                <i-Content style="display:none">
                </i-Content>

                <div>
                    <Alert type="success" show-icon>
                        上传规范
                        <template slot="desc">
                            照片格式：jpg
                            <br/>
                            照片大小：大于60kb，小于200kb
                            <br/>
                            照片底色：建议浅蓝色
                            <br/>
                            照片文件名：学号、考生号、身份证号或学号_学生姓名
                        </template>
                </div>

                <Form-Item label="照片类型" prop="zplx">
                    <i-Select style="width:300px;" clearable  v-model="saveform.zplx">
                        <i-Option v-for="item in zplxList" :value="item.DM" :key="item.DM" >{{ item.MC }}</i-Option>
                    </i-Select>
                </Form-Item>
                <template>
                    <div>
                        <div class="demo-upload-list" v-for="item in uploadList">
                            <img :src="item">
                            <div class="demo-upload-list-cover">
                                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                            </div>
                        </div>
                        <Upload ref="upload" :show-upload-list="false"
                                multiple
                                :before-upload="handleBeforeUpload" type="drag" action=""
                                style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="ios-camera" size="20"></Icon>
                            </div>
                        </Upload>
                    </div>
                </template>

            </i-Form>
            <div slot="footer">
                <i-button type="text" size="large" @click="cancel">取消</i-button>
                <i-button type="primary" size="large" @click="upload">上传文件</i-button>
            </div>
    </Modal>

2、css样式

.demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }

3、js代码实现手动上传

upload:function () {
            var self = this;

            var uploads = self.uploadList;
            var names = self.fileNames;
            for (var i = 0; i < uploads.length; i++) {
                var upload = uploads[i];
                var name = names[i];
                jQuery.ajax({
                    type: "post",
                    url: baseUrl + 'xjgl/xjzpgl/plsczp',
                    data: {upload:upload,name:name,zplx:self.saveform.zplx},
                    async: true,
                    success: function (res) {
                        self.uploadList.splice(self.uploadList.indexOf(upload), 1)
                        self.fileNames.splice(self.fileNames.indexOf(name), 1)
                        self.$Notice.success({
                            title: '文件上传成功',
                            desc: '文件 ' + name + ' 上传成功。'
                        });
                    }
                })
            }

        },


        handleBeforeUpload:function(file) {
            var reader = new FileReader();
            var imgUrlBase64;
            if (file) {
                //将文件以Data URL形式读入页面
                imgUrlBase64 = reader.readAsDataURL(file);
                const _this = this;
                reader.onload = function (e) {
                    var filenames = file.name.split(".");
                    var fileType = filenames[filenames.length-1];
                    var fileSize = file.size;
                    _this.$Notice.info({
                        title: '文件正在加载',
                        desc: '文件 ' + file.name + ' 正在加载。'
                    });

                    /*if(!(fileType == "jpg" )){
                        _this.$Notice.warning({
                            title: '文件格式不正确',
                            desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。',
                        })
                    }else if(fileSize>204800 || fileSize<61440){
                        _this.$Notice.warning({
                            title: '超出或小于文件大小限制',
                            desc: '文件 ' + file.name + ' 应大于60kb，小于200kb'
                        })
                    }else{*/
                        file.url = reader.result
                        _this.uploadList.push(reader.result)
                        _this.fileNames.push(file.name);
                        _this.$Notice.success({
                            title: '文件加载成功',
                            desc: '文件 ' + file.name + ' 加载成功。'
                        });
                   /* }*/

                }
            }
        },

        handleRemove:function(file) {
            var num = this.uploadList.indexOf(file);
            this.uploadList.splice(num, 1)
            this.fileNames.splice(num, 1)
        },

4、后端代码

@ResponseBody
    @RequestMapping(value = "plsczp" , method = RequestMethod.POST )
    public String plsczp(String upload,String name,XjzpPage xjzpPage,@AuthenticationPrincipal  UserDetails user,HttpServletRequest request){
        String username = user.getUsername();
        try {
            String[] filenames = name.split("\\.");
            String fileType = filenames[filenames.length-1];
            String filename = name.substring(0,name.indexOf(fileType)-1);

            long timestamp=System.currentTimeMillis();
            String jiaminame = filename + "@" +  timestamp;

            String wjUrl = "D:"+File.separator+"tupians";
            String bsUrl = wjUrl +File.separator +jiaminame +".jpg";

            Map<String,String> xsxx = xjzpService.getXsxx(filename);
            if(xsxx == null){
                throw new Exception();
            }

            String[] base64 =upload.split(",");
            byte[] base64Body = new BASE64Decoder().decodeBuffer(base64[1]);
            //byte[] base64Body = new BASE64Decoder().decodeBuffer(upload);
            XszpXxEntity xszpXxEntity = new XszpXxEntity();
            xszpXxEntity.setPylx("1");
            xszpXxEntity.setXjid(xsxx.get("ID"));
            xszpXxEntity.setZplxdm(xjzpPage.getZplx());
            xszpXxEntity.setZp(base64Body);
            xszpXxEntity.setZpbslj(bsUrl);
            xszpXxEntity.setZpmc(jiaminame + ".jpg");

            InetAddress ip = InetAddress.getLocalHost();
            String mac = getLocalMac(ip);
            xszpXxEntity.setIp(ip.toString());
            xszpXxEntity.setMac(mac);

            xszpXxEntity.setCjr(username);
            xszpXxEntity.setZhxgr(username);

            xjzpService.insertXjXszpxx(xszpXxEntity);
            boolean s = GenerateImage(base64[1],bsUrl,wjUrl);

            return "1";
        }catch (Exception e){
            e.printStackTrace();
            return "2";
        }
    }



public  boolean GenerateImage(String imgStr, String imgFilePath,String wjUrl) {
        if (imgStr == null)// 图像数据为空
            return false;
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            // Base64解码
            byte[] bytes = decoder.decodeBuffer(imgStr);
            for (int i = 0; i < bytes.length; ++i) {
                if (bytes[i] < 0) {// 调整异常数据
                    bytes[i] += 256;
                }
            }
            // 生成jpeg图片
            File file = new File(wjUrl);
            //如果目录不存在则创建
            if(!file.isDirectory()){
                file.mkdirs();
            }
            OutputStream out = new FileOutputStream(imgFilePath);
            out.write(bytes);
            out.flush();
            out.close();
            return true;
        } catch (Exception e) {
            e.getMessage();
            return false;
        }
    }

其中File.separator为路径分隔符，他能自动识别是哪个操作系统而使用不同的路径分隔符（windows是‘\’,linux是‘/’）。最后将list返回给前台。