springboot 把圖片上傳到七牛雲上並且取得外鏈存入到數據庫內

1：添加依賴

在porm.xml上添加七牛雲的依賴

    <!-- 七牛雲 -->
        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>[7.2.0, 7.2.99]</version>
        </dependency>

2：在controller上把uptoken獲取好

@RequestMapping("/openAddCompany")
    public ModelAndView openAddCompany(){
        ModelAndView mv=new ModelAndView();
        String accessKey = "accessKey ";
        String secretKey = " secretKey";
        String bucket = "bucket";
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket);
        mv.addObject("upToken",upToken);
        mv.setViewName("/addcompany.btl");
        return mv;
    }

accessKey 和secretKey都可以在密鑰管理中獲得

 

bucket 就是你存儲的空間名稱

 

3：前端獲取token以后就行傳輸，有多種方式可以參考七牛雲的文檔：https://developer.qiniu.com/kodo/manual/1234/upload-types

 我用的是js異步上傳：可以參考：http://jsfiddle.net/gh/get/jquery/1.9.1/icattlecoder/jsfiddle/tree/master/ajaxupload

我的代碼

function sentPhoto(){
              var Qiniu_UploadUrl = "http://upload-z2.qiniup.com";
              //普通上傳
              var Qiniu_upload = function(f, token, key) {
                  var xhr = new XMLHttpRequest();
                  xhr.open('POST', Qiniu_UploadUrl, true);
                  var formData, startDate;
                  formData = new FormData();
                  if (key !== null && key !== undefined) formData.append('key', key);
                  formData.append('token', token);
                  formData.append('file', f);
                  var taking;
                  xhr.upload.addEventListener("progress", function(evt) {
                      if (evt.lengthComputable) {
                          var nowDate = new Date().getTime();
                          taking = nowDate - startDate;
                          var x = (evt.loaded) / 1024;
                          var y = taking / 1000;
                          var uploadSpeed = (x / y);
                          var formatSpeed;
                          if (uploadSpeed > 1024) {
                              formatSpeed = (uploadSpeed / 1024).toFixed(2) + "Mb\/s";
                          } else {
                              formatSpeed = uploadSpeed.toFixed(2) + "Kb\/s";
                          }
                          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                          // progressbar.progressbar("value", percentComplete);
                          // console && console.log(percentComplete, ",", formatSpeed);
                      }
                  }, false);

                  xhr.onreadystatechange = function(response) {
                      if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
                          var blkRet = JSON.parse(xhr.responseText);
                          document.getElementById("companylogo").value=blkRet.key;
                          console && console.log(blkRet);
                      } else if (xhr.status != 200 && xhr.responseText) {

                      }
                  };
                  startDate = new Date().getTime();

                  xhr.send(formData);
              };
              var token = $("#token").val();
              if ($("#file")[0].files.length > 0 && token != "") {
                  Qiniu_upload($("#file")[0].files[0], token, $("#key").val());
              } else {
                  console && console.log("form input error");
              }

      }

我通過onchange觸發這個方法，把圖片上傳到七牛雲后，再把key值付給一個input，通過form表單提交后台接受

   <div class="form-group">
                                      <label class="control-label col-md-3 col-sm-3 col-xs-12">公司Logo</label>
                                      <div class="col-md-6 col-sm-6 col-xs-12">
                                          <input id="file" class="form-control col-md-7 col-xs-12"
                                                 required="required" type="file" name="file" onchange="sentPhoto()">

                                      </div>
                                      <input type="hidden" id="token" name="token" value=${upToken} >
                                      <input type="hidden" id="companylogo" name="companylogo">
                                      <div id="progressbar"><div class="progress-label"></div></div>
                                  </div>

 

4：把外鏈存入數據庫：

    @RequestMapping("/saveCompany")
    public String saveCompany(company company){

        String url="xxx";
        company.setCompanylogo(url+company.getCompanylogo());
        companyRepository.save(company);

        return "redirect:/company/companylog";

        }

url是你的外鏈默認域名 它與上傳圖片成功傳回的key值就組成了該圖片的外鏈

 

這樣你就可以獲得你上傳到七牛雲圖片的外鏈了，存入數據庫后就可以通過<a>標簽直接訪問