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

1、前端页面

            
                
                

                

                    
                        上传规范
                        
                

                
                    
                        {
    { item.MC }}
                    
                
                

            
            

                取消
                上传文件
            
    

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 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返回给前台。