bpm上传头像问题记录

1、前端用的angular，页面

           <tr>
                <th>
                    <span>上传头像:</span>
                </th>
                <td>
                    <img id="preview" />
                    <input type="file" name="file" id = "input_file" ng-model="data.photo" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" οnchange="imgPreview(this)" >    
                </td> 
            </tr>

2、加入js，调取上传方法

$(function() {
        $('.myusercenter-hard-img').on('change', function(e) {
            var files = e.target.files;
            var reader = new FileReader();
            reader.readAsDataURL(files[0], "UTF-8");
            reader.onload = function(evt) {
                var fileString = evt.target.result;
                var date = {
                    "file": fileString
                };
                $('.myusercenter-image').attr('src', fileString);

                console.log(fileString)

                 $.post(__ctx + "/sys/sysFile/uploadHeadPic", date).success(function (result) {
                    console.log(result)
                }); 
            }
            console.log(e.target.files)
        })
    })

给图片上传完加预览功能

function imgPreview(fileDom) {
        //判断是否支持FileReader
        if(window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        var imageType = /^image\//;
        //是否是图片
        if(!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        //读取完成
        reader.onload = function(e) {
            //获取图片dom
            var img = document.getElementById("preview");
            //图片路径设置为读取的图片
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
        
        var formData = new FormData(); 
        formData.append('file', $('#input_file')[0].files[0]);  //添加图片信息的参数
        $.ajax({
            url: __ctx+'/sys/sysFile/uploadHeadPic',
            type: 'POST',
            cache: false, //上传文件不需要缓存
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                var rs = eval("("+data+")");
                if(rs.isOk==true){
                    var phoneValue=rs.data;
                   //因为是angular所以用jquery是获取不到angular信息的，所以下面从网上搜到这样的写法
                    var scope = angular.element('#form').scope();//获取scope信息
                    scope.$apply(function(){
                        scope.data.photo = phoneValue;//给data.photo赋值
                    });
                }
            },
            error: function (data) {
                alert("上传失败");
            }
        })  
    }

3、后台

/**
     * 上传头像
     */
    @RequestMapping(value = "uploadHeadPic", method = RequestMethod.POST)
    @CatchErr(value = "上传失败")
    public ResultMsg<String> uploadHeadPic(@RequestParam("file") MultipartFile file) throws Exception {
        SysFile sysFile = sysFileManager.upload(file.getInputStream(), file.getOriginalFilename(),"1");
        String path = sysFile.getPath();
        return getSuccessResult(sysFile.getPath(), "上传成功");
    }

/*service层*/

@Override
    public SysFile upload(InputStream is, String fileName,String ids) {
        String ext = fileName.substring(fileName.lastIndexOf('.'));
        String id = IdUtil.getSuid();

        // 1 先上传文件
        OrdinaryUploader uploader = new OrdinaryUploader();
        String path = uploader.upload(is, id + ext);//以id为文件名保证不重复

        // 2 建立SysFile数据
        SysFile sysFile = new SysFile();
        sysFile.setId(id);
        sysFile.setName(fileName);
        sysFile.setUploader(uploader.type());
        sysFile.setPath(path);
        sysFile.setVersion(ids);
        create(sysFile);

        return sysFile;
    }

@Override
    public String upload(InputStream is, String name) {
        FileUtil.writeFromStream(is, getPath(name));
        return getPath(name);
    }

/**
     * 保存用户表信息
     */
    @RequestMapping("save")
    @Override
    @CatchErr(write2response = true, value = "操作用户失败！")
    public ResultMsg<String> save( @RequestBody User user) throws Exception {
        if (userManager.isUserExist(user)) throw new BusinessMessage("用户在系统中已存在!");
        String photo = user.getPhoto();
        String[] split=null;
        if(photo.contains("\\")) {  //注意左斜杠和右斜杠问题
            split=photo.split("\\\\");
        }else {
            split=photo.split("/");
        }
        String filePath = split[3];
        String fileName = split[4];
        user.setPhoto("/IT/file/"+filePath+"/"+fileName);
        userManager.saveUserInfo(user);
        return getSuccessResult(user.getId(), "保存成功");
    }

4、配置tomcat虚拟路径

<Context docBase="D:\IT\file" path="/ydbpm-explorer/IT/file" reloadable="true"/>