头像上传

<div id="upfile_bt1">从相册选一张</div>
    <input id="files" name="files" type="file" multiple="multiple"/>
</div>

 

js

//文件预览
$("#files").change(function () {
    var $file = $(this);
    var fileObj = $file[0];
    var windowURL = window.URL || window.webkitURL;
    var dataURL;
    var $img = $("#head-show img");

    if (fileObj && fileObj.files && fileObj.files[0]) {
        dataURL = windowURL.createObjectURL(fileObj.files[0]);
        $img.attr('src', dataURL);
    } else {
        dataURL = $file.val();
        var imgObj = document.getElementById("preview");
        // 两个坑:
        // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
        // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
        imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

    }
});

 

// 文件上传
//上传文件并修改头像
$(".save").click(function () {
    //获取input中file的值
    var file = document.querySelector("#files").files[0];
    console.log(file);
    //创建formdata对象
    var formdata = new FormData();
    formdata.append("file", file);
    $.ajax({
        url: httpurl + "/api/userHead",
        type: "post",
        async: true,
        contentType: false,
        processData: false,
        beforeSend:
            function (request) {
                request.setRequestHeader("token", JSON.parse(localStorage.getItem("token")));
            },
        dataType: "json",
        data: formdata,
        success: function (result) {
                window.location.href = "../login/person/person.html";

        }
    })

});

 

java代码

//选择头像
@RequestMapping("/userHead")
@ResponseBody
public Object userHeadPhoto(@RequestParam("file") MultipartFile[] files, HttpServletRequest request,UserPer userper) throws Exception {
    List<URL> filePaths = aliyunOssUtil.oosPut(files);
    String url = filePaths.get(0).toString();
    userper.setUserId(TokenUtil.getUserSession(request, redisOperator).getUserId());
    userper.setPhoto(url);
    return appUserPerService.userUpdate(userper);
}

 

 

阿里云oss工具类方法

public List<URL> oosPut(MultipartFile[] files) throws Exception{
    OSSClient ossClient = getOSSClient();
    List<URL> urls = new ArrayList<>();
    for (MultipartFile file : files) {
        String md5key = uploadObject2OSS(ossClient, file, BACKET_NAME, FOLDER);
        logger.info("上传后的文件MD5数字唯一签名:" + md5key);
        URL url = getUrl(ossClient, md5key);
        urls.add(url);
    }
    return urls;
}