java上傳圖檔到七牛雲儲存空間

如有需要可以加我Q群【308742428】大家一起讨論技術，提供技術支援。

後面會不定時為大家更新文章，敬請期待。

話不多說直接上代碼：

前端這裡我是使用的layui的插件，樣式還是可以需要引入兩個檔案：

一個css樣式檔案，一個js檔案

<script src="${ctxStatic}/layui/layui.js" charset="utf-8"></script>
           

html頁面樣式：

html代碼：

<div class="col-xs-12">
        <div class="form-group">
            <label class="control-label col-sm-2">${text('圖檔')}：</label>
            <div class="col-sm-10">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="btn_imgs"><i class="layui-icon"></i>上傳圖檔</button>
                    <button type="button" class="layui-btn layui-btn-normal" οnclick="resetimg()" >清空圖檔</button>
                <div class="layui-upload-list">
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        <div class="layui-upload-list" id="img_imgs"></div>
                    </blockquote>
                    <p id="imgsText"></p>
                    <input type="hidden" id="img" name="img" value="${zrCircle.img}">
                </div>
                </div>
            </div>
        </div>
    </div>
</div>           

javascript代碼：

//清空圖檔

function resetimg(){

$('#img_imgs').empty();
$("#img").val("");           

}

layui.use('upload', function(){

var $ = layui.jquery
        ,upload = layui.upload;

//多圖檔上傳 如何隻需要上傳單張圖檔multiple，number兩個參數去掉即可
upload.render({
    elem: '#btn_imgs'
    ,accept: 'images'
    ,acceptMime: 'image/*'
    ,exts: 'jpg|png|jpeg|bmp'
    ,url: '' //改成您自己的上傳接口
    ,multiple: true
    ,number:5
    ,before: function(obj){
        //預讀本地檔案示例，不支援ie8
        obj.preview(function(index, file, result){
            $('#img_imgs').append('<img src="'+ result +'" alt="'+ file.name +'" style="margin-left:10px;" class="layui-upload-img" width="200px" height="160px">')
        });
    }
    ,done: function(res){
        if(res.code ==500){
            return layer.msg('上傳失敗');
        }else{
            //上傳成功
            var ss=$("#img").val();
            if (ss.length>4){
                ss=ss+","+res.url;
            }else{
                ss=res.url;
            }
            $("#img").val(ss);
            //點選放大
            renderImg();
        }
    }
    ,error: function(){
        //示範失敗狀态，并實作重傳
        var demoText = $('#imgsText');
        demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
        demoText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
        });
    }
});
           

});

背景java代碼：

/**

* 上傳圖檔
 * @param file
 * @return
 */
@PostMapping(value = "upload")
@ResponseBody
public  Map<String,Object> upload(MultipartFile file)  {
    String fileName=null;
    Map<String,Object> map=new HashMap<>();
    try {
        File f = File.createTempFile("tmp", null);
        //通過MultipartFile的transferTo(File dest)這個方法來轉存檔案到指定的路徑。MultipartFile轉存後，無法再操作，會報錯
        file.transferTo(f);
        fileName = QiniuCloudUtil.upload(f);
        fileName="http://qiniu.zenran.com/"+fileName;
        System.out.println(fileName);
        //在JVM程序退出的時候删除檔案,通常用在臨時檔案的删除.
        f.deleteOnExit();
        map.put("code",200);
        map.put("url",fileName);
    } catch (IOException e) {
        map.put("code",500);
        map.put("url",fileName);
        e.printStackTrace();
    }
    return map;
}           

QiniuCloudUtil工具類：

import com.qiniu.common.QiniuException;

import com.qiniu.common.Zone;

import com.qiniu.http.Response;

import com.qiniu.storage.Configuration;

import com.qiniu.storage.UploadManager;

import com.qiniu.util.Auth;

import org.apache.commons.lang3.StringUtils;

import java.io.File;

import java.io.IOException;

import java.util.UUID;

• @author dsn
• @createTime 07 21:07

• @description 七牛雲工具

  */

public class QiniuCloudUtil {

// 設定需要操作的賬号的AK和SK
private static final String ACCESS_KEY = "";
private static final String SECRET_KEY = "";
// 要上傳的空間名
private static final String bucketname = "";
private static final String domain = "";       //外鍊域名
// 密鑰
private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
           

// //上傳

public static String upload(File file) throws IOException {
    // 建立上傳對象，Zone*代表地區
    Configuration configuration = new Configuration(Zone.zone2());
    UploadManager uploadManager = new UploadManager(configuration);
    try {
        // 調用put方法上傳
        String token = auth.uploadToken(bucketname);
        if(StringUtils.isEmpty(token)) {
            System.out.println("未擷取到token，請重試！");
            return null;
        }
        String imageName = UUID.randomUUID().toString();
        System.out.println("File name = "+imageName);
        Response res = uploadManager.put(file,imageName,token);
        // 列印傳回的資訊
        if (res.isOK()){
            return imageName;
        }
    }catch (QiniuException e) {
        Response r = e.response;
        // 請求失敗時列印的異常的資訊
        e.printStackTrace();
        System.out.println("error "+r.toString());
        try {
            // 響應的文本資訊
            System.out.println(r.bodyString());
        } catch (QiniuException e1) {
            System.out.println("error "+e1.error());
        }
    }
    return null;
}           

需要注意使用七牛雲需要下載下傳依賴包：

<groupId>com.qiniu</groupId>
        <artifactId>qiniu-java-sdk</artifactId>
        <version>7.2.28</version>
    </dependency>