文件上傳到阿里雲，前臺html，後臺java

效果：

上傳圖片前：

上傳圖片後：

html：

<div class="form-group">
  <label class="control-label col-sm-4" for="pic">分類圖標：</label>
    <div class="col-sm-6 upimg-div">
       <div class="close-upimg"></div>
       <img src="/resources/img/room/upload.png" class="add-img">
       <input type="file" class="file" id="file"  name="file" value="" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="selectImage(this);"/>		
       <input type="hidden" id="pic" name="pic" value="">
     </div>
</div>

css：

	.add-img{height: 150px;width: 150px;z-index:10;}
	.upimg-div .file{
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
	}
.close-upimg {
	position: relative;
    top: 5px;
    left: 150px;
    background-image: url(/resources/img/room/del.png);
    height: 30px;
    width: 30px;
    background-repeat: no-repeat;
    float: left;
    visibility: hidden;
    z-index:100;
}

js：

$(document).ready(
	$(function() {
	  if ($("#add-img")[0]) {
	  var src = $("#add-img")[0].src;
	  console.log(src);
	  // 當圖片爲上傳圖片時，不顯示X
	 if (src.toString().indexOf("upload.png") == -1) {
		var closeUpimg = $(".close-upimg").attr("style","visibility:visible;");
		}
	}
// 點擊X刪除選擇圖片
	$(".close-upimg").click(function() {
		$(".add-img").attr("src", "/resources/img/room/upload.png");
		$(".close-upimg").attr("style", "visibility:hidden;");
		formData = new FormData();
		formData.append("file", '');
		$("#add-img").removeAttr("value");
	})
	$(function() {
		$("#save_btn").click(function() {
		if ($("#submit_form").valid()) {
			var $target = $('#room_categories_div');
			$.dm.block($target);// 開始區域鎖定
			var picNew = uploadFile(formData);// 獲取上傳的圖片
			var pic = $("#add-img").attr("value");// 獲取前臺頁面的圖片
			if (pic != null && pic != "" && pic) {
				$("#pic").val(pic);
			} else {
				$("#pic").val(picNew);
			}
		}
	});
});
}))
function selectImage(file) {
	if (!file.files || !file.files[0]) {
		return;
	}
	var reader = new FileReader();
	reader.readAsDataURL(file.files[0]);
	reader.onload = function(evt) {
	var imag = $(".add-img").attr("src", evt.target.result).attr("style","height:150px;width:150px;");// 圖片預覽
	var closeUpimg = $(".close-upimg").attr("style", "visibility:visible;");// 顯示圖片上的刪除按鈕X
}
	uploadImage(file);
}
// 文件上傳
var formData;
function uploadImage(file) {
	formData = new FormData();
	formData.append("file", file.files[0]);
}
function uploadFile(formData) {
	var pic = "";
	if (formData != null && formData.get("file") != "") {// 判斷當上傳數據爲空時
		$.ajax({
		    url : 'XXX',
			type : 'POST',
			async : false,
			cache : false,
			dataType : 'json',
			data : formData,
			processData : false,
			contentType : false,
			success : function(data) {
		if (data.success) {
			pic = data.result;
			}
		},
	});
		return pic;
	}

}

JAVA:Controller：

 @Autowired
    private OSSHelper oSSHelper; 
/**
     * 上傳文件
     */
    @RequestMapping(value = "XXX.ajax", method = RequestMethod.POST)
    @ResponseBody
    public ResultDto<String> upload(@RequestParam("file") MultipartFile file,
            @RequestParam("imageType") String imageType, @RequestParam("modulePath") String modulePath) {

        ResultDto<String> response = new ResultDto();

        if (file == null) {
            logger.info("上傳圖片時，圖片爲空！");
            response.setError("1", "上傳圖片時，圖片爲空！");
            return response;
        }

        if (modulePath == null || "".equals(modulePath)) {
            logger.info("上傳圖片時，模塊路徑不能爲空！");
            response.setError("1", "上傳圖片時，圖片類型不能爲空！");
            return response;
        }

        String fileName = file.getOriginalFilename();
        if (fileName == null || "".equals(fileName)) {
            logger.info("圖片上傳張數不能爲0");
            response.setError("1", "圖片上傳張數不能爲0");
            return response;
        }

        if (imageType == null || "".equals(imageType)) {
            logger.info("上傳圖片時，圖片類型不能爲空！");
            response.setError("1", "上傳圖片時，圖片類型不能爲空！");
            return response;
        }

        if (ImageTypeEnum.PIC.equals(imageType)) {
            if (file.getSize() > Constant.PIC_MAX_SIZE) {
                logger.info("上傳圖片大小不能超過" + (Constant.PIC_MAX_SIZE / 1048576) + "M");
                response.setError("1", "上傳圖片大小不能超過" + (Constant.PIC_MAX_SIZE / 1048576) + "M");
                return response;
            }
        } else if (ImageTypeEnum.ICON.equals(imageType)) {
            if (file.getSize() > Constant.ICON_MAX_SIZE) {
                logger.info("上傳圖標大小不能超過" + (Constant.ICON_MAX_SIZE / 1048576) + "M");
                response.setError("1", "上傳圖標大小不能超過" + (Constant.ICON_MAX_SIZE / 1048576) + "M");
                return response;
            }
        }

        String fileLocalName = FileUrlUtil.getUrl(fileName, modulePath);
        try {
            logger.trace("開始上傳到阿里雲:" + fileLocalName);
            String path = oSSHelper.upload(fileLocalName, file.getInputStream());
            logger.trace("完成上傳:" + path);
            response.setResult(path);
        } catch (IOException e) {
            logger.error("上傳圖片異常，圖片:" + fileName, e);
            response.setError("1", "上傳圖片失敗");
            return response;
        }
        response.setSuccess(true);
        response.setMessage("上傳圖片成功");
        return response;
    }

OSSHelper：

    public String upload(String filename, InputStream is) {

        ClientConfiguration conf = new ClientConfiguration();
        // 創建OSSClient實例。
        OSS ossClient = new OSSClientBuilder().build(Constant.OSS_ENDPOINT, Constant.OSS_ACCSESS_KEY_ID,
                Constant.OSS_ACCSESS_KEY_SECRET);

        // <yourObjectName>表示上傳文件到OSS時需要指定包含文件後綴在內的完整路徑，例如abc/efg/123.jpg。
        PutObjectRequest putObjectRequest = new PutObjectRequest(Constant.OSS_BUCKET_NAME, filename, is);

        // 上傳文件。
        ossClient.putObject(putObjectRequest);

        // 關閉OSSClient。
        ossClient.shutdown();

        // ossClient.putObject(BUCKET_NAME_SAAS, filename, is);
//        return Constant.OSS_ENDPOINT_ACCELERATE + "/" + filename;
        return filename;
    }