需求：
最近在做專案的時候採用了多模組的方案
前臺是一個系統 後臺是另一個系統
在做圖片上傳的時候有個問題 如果想之前那樣前臺系統的圖片儲存的自己的web應用目錄下 後臺系統是沒法訪問的 （直接寫死路徑不太好）
這裡我想到了兩個方案
方案一：自己搭建一個ftp伺服器上傳圖片 然後再搭建一個nginx伺服器來訪問
方案二：採用七牛雲端儲存平臺
這裡我採用的是方案二 因為沒有體驗過七牛 借這個機會玩玩

• 第一步註冊七牛賬號 獲取相關的key
• 匯入jar包 這裡採用maven方式

  <dependency>
            <groupId>
 
com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
              <!--這樣寫 會自動找7.2的最高版本-->
            <version>[7.2.0, 7.2.99]</version> 
        </dependency>

• 上傳圖片有兩種方式 一是客戶端上傳 而是伺服器直傳
  這裡我用的伺服器直傳
  瀏覽器採用的html5 壓縮 傳輸base64方式 所以這裡用Base64解碼並生成圖片
  如果是傳統的MultipartFile則不需要

   @RequestMapping("/upload")
    @ResponseBody
    public Map imageUpload(String type,String value,HttpServletRequest request) {
        Logger logger = Logger.getLogger(this.getClass());

        Map map = imageService.uploadImage(value, request.getSession().getServletContext());
        return map
 
;
    }

@Service
public class ImageServiceImpl implements ImageService {


    @Override
    public Map uploadImage(String imgStr, ServletContext servletContext) {
        Map map = new HashMap();

        //對位元組陣列字串進行Base64解碼並生成圖片
        if (imgStr == null) { //影象資料為空
            map.put("error", 1);
            map.put("message", "上傳失敗");
            return map;
        }
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            //Base64解碼
            byte[] b = decoder.decodeBuffer(imgStr);
            for (int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {//調整異常資料
                    b[i] += 256;
                }
            }
            String key = IDUtils.genImageName();
            //構造一個帶指定Zone物件的配置類
            Configuration cfg = new Configuration(Zone.zone0());
//...其他引數參考類註釋
            UploadManager uploadManager = new UploadManager(cfg);
//...生成上傳憑證，然後準備上傳
            String accessKey = "ceLw-DN7neXckVebuUE6eOJC1GPBuXkXS4mkyOzb";
            String secretKey = "pg3QL2EuJY9LOjSayhBWGHvAlwfdxEk9UXrx9zT9";
            String bucket = "zspwork";
//預設不指定key的情況下，以檔案內容的hash值作為檔名

            ByteArrayInputStream byteInputStream = new ByteArrayInputStream(b);
            Auth auth = Auth.create(accessKey, secretKey);
            String upToken = auth.uploadToken(bucket);

            Response response = uploadManager.put(byteInputStream, key, upToken, null, null);
            //解析上傳成功的結果
            DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
            System.out.println(putRet.key);
            System.out.println(putRet.hash);
            map.put("error", 0);
            map.put("message", "http://o7k6tx0fl.bkt.clouddn.com/" + key);
        } catch (Exception e) {
            e.printStackTrace();
            map.put("error", 1);
            map.put("message", "上傳失敗");
            return map;
        }
        return map;

    }
}

前臺 上傳圖片後回撥拿到地址

  <a href="javascript:;" class="file">選擇檔案
                <input type="file"  id="photo" accept="image/*">
            </a>
   <input type="text" class="form-control" name="cardImgurl" id="imgInput" readonly>

// 圖片上傳
$('#photo').change(function () {
    var _this = $(this)[0],
        _file = _this.files[0],
        fileType = _file.type;
    console.log(_file.size);
    if (/image\/\w+/.test(fileType)) {
        //提示
        var index = layer.open({
            content: '圖片上傳中...'
            , skin: 'msg'
        });
        var fileReader = new FileReader();
        fileReader.readAsDataURL(_file);
        fileReader.onload = function (event) {
            var result = event.target.result;   //返回的dataURL
            var image = new Image();
            image.src = result;
            image.onload = function () {  //建立一個image物件，給canvas繪製使用
                var cvs = document.createElement('canvas');
                var scale = 1;
                if (this.width > 1000 || this.height > 1000) {  //1000只是示例，可以根據具體的要求去設定
                    if (this.width > this.height) {
                        scale = 1000 / this.width;
                    } else {
                        scale = 1000 / this.height;
                    }
                }
                cvs.width = this.width * scale;
                cvs.height = this.height * scale;     //計算等比縮小後圖片寬高
                var ctx = cvs.getContext('2d');
                ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
                var newImageData = cvs.toDataURL(fileType, 0.8);   //重新生成圖片，<span style="font-family: Arial, Helvetica, sans-serif;">fileType為使用者選擇的圖片型別</span>
                var sendData = newImageData.replace("data:" + fileType + ";base64,", '');
                $.post('/upload', {type: 'photo', value: sendData}, function (data) {
                    if (data.error == '0') {
                        $('.modify_img').attr('src', newImageData);
                        $("#imgInput").attr("value", data.message);
                        layer.closeAll();
                    } else {
                        layer.closeAll();
                        layer.open({
                            content: data.message
                            , skin: 'msg'
                        });
                    }
                });
            }

        }
    } else {
        layer.open({
            content: '請選擇圖片格式檔案'
            , skin: 'msg'
        });
    }
});