java上傳圖片到七牛雲

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

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

話不多說直接上代碼：

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

一個css樣式文件，一個js文件

<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css"  media="all">
<script src="${ctxStatic}/layui/layui.js" charset="utf-8"></script>

html頁面樣式：

 

 html代碼：

<div class="row">
	<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工具類：

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

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

 
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;
    }
}