一、上傳輪播（包含圖片檔案）

/**
     * 新增輪播資訊
     *
     * @param request
     * @param file
     * @param carousel
     * @return
     * @throws IOException
     */
    @RequestMapping(value = "/addCarousel")
    public RecycleResult addCarousel(HttpServletRequest request, MultipartFile file, Carousel carousel) throws IOException {
        if (file == null || StringUtils.isBlank(file.getOriginalFilename())){
            RecycleResult.build(500, "檔案不能為空");
        }

        String rootPath = ResourceUtils.getURL("").getPath() + "static/upload/";
        File rootFile = new File(rootPath);
        if (!rootFile.exists()) {
            rootFile.mkdirs();
        }
        String realPath = new Date().getTime() + file.getOriginalFilename();
        //儲存檔案
        File storeFile = new File(rootPath + realPath);

        file.transferTo(storeFile);

        //寫入資料庫
        carousel.setPhotoPath(realPath);

        if (carousel != null){
            cmsService.addCarousel(carousel);
        }
        return RecycleResult.ok();
    }
 

二、nginx代理（儲存到本地磁碟）

server {
        listen       8018;
        server_name  localhost;

        location / {
            root  D:/development/project/green/green-collection/static/upload/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
       
    }
 

重啟： ./nginx -s reload

三、訪問本地資源（根據id訪問輪播詳情）

（1）獲取URL引數 id

$(function() {
	//獲取引數id
	var a = GetRequest();
	var id = a['id'];

	//獲取輪播圖詳細資訊
	viewCarouselDetailById(id);

});

//獲取頁面傳遞引數
function GetRequest() {
	var url = location.search; //獲取url中"?"符後的字串
	var theRequest = new Object();
	if(url.indexOf("?") != -1) {
		var str = url.substr(1);
		strs = str.split("&");
		for(var i = 0; i < strs.length; i++) {
			theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
		}
	}
	return theRequest;
}
 

（2）根據id獲取相應資訊

//檢視輪播圖詳細資訊
function viewCarouselDetailById(id) {
	$.get("http://192.168.1.119:9911/cms/viewCarouselDetail/" + id,
		function(data, status) {
			//時間格式化
			data.createTime = timestampToTime(data.createTime);
			new Vue({
				el: '#app', //元素
				data: {
					info: data
				}
			})
		}
	)
}

//時間格式化
function timestampToTime(timestamp) {
	var date = new Date(timestamp);//時間戳為10位需*1000，時間戳為13位的話不需乘1000
    Y = date.getFullYear() + '-';
    M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    D = date.getDate() + ' ';
    h = date.getHours() + ':';
    m = date.getMinutes() + ':';
    s = date.getSeconds();
    return Y+M+D+h+m+s;
}

（3）結合vue.js渲染資料

<div id="app">
				<!--<h1 class="z_title">{{info.title}}</h1>-->
				<div class="z_photoPath">
					<img v-bind:src="['http://192.168.1.119:8018/'+info.photoPath]" />
				</div>
				<p class="z_info">
					<span class="z_posterName">作者：{{info.posterName}}</span>
					<span class="z_createTime">釋出時間：{{info.createTime}}</span>
				</p>
				<p class="z_content">      {{info.description}}</p>
			</div>