檔案上傳七牛雲伺服器(看完就會)
阿新 • • 發佈：2018-11-19
2018年11月13日星期日
隨筆 筆記
1、上傳檔案到七牛雲
註冊登陸到七牛雲，需要認證資訊才能建立個人儲存空間;
儲存區域介紹
最近更新時間：2018-09-09 15:49:21
| 儲存區域 |
地域簡稱 |
上傳域名 |
| 華東 |
z0 |
伺服器端上傳：http(s)://up.qiniup.com |
| 華北 |
z1 |
伺服器端上傳：http(s)://up-z1.qiniup.com 客戶端上傳：http(s)://upload-z1.qiniup.com |
| 華南 |
z2 |
伺服器端上傳：http(s)://up-z2.qiniup.com |
| 北美 |
na0 |
伺服器端上傳：http(s)://up-na0.qiniup.com |
| 東南亞 |
as0 |
伺服器端上傳：http(s)://up-as0.qiniup.com 客戶端上傳：http(s)://upload-as0.qiniup.com |
後臺上傳七牛雲服務:選擇的是七牛雲的JAVA SDK開發文件,但是沒有提供前臺上傳七牛雲的API
第一 在七牛雲建立自己的儲存空間
第二 建立Maven專案
不是springboot配置寫的程式碼不影響;
這裡的version指定了一個版本範圍，每次更新pom.xml的時候會嘗試去下載7.2.x版本中的最新版本，你可以手動指定一個固定的版本
Springboot依賴庫
<!-- Spring Boot 父檔案 --> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.10.RELEASE</version> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 熱部署 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> <!-- 測試 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> </dependency> <!--必須有才能編譯jsp --> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> <scope>provided</scope> </dependency>
匯入依賴
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>[7.2.0, 7.2.99]</version>
</dependency>第三 上傳程式碼
後臺上傳檔案工具
package cn.itsource.utils;
import com.google.gson.Gson;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
public class FileUploadUtils {
public static String fileUploadToQiNiu(String uploadFile,String fileName){
// 構造一個帶指定Zone物件的配置類
Configuration cfg = new Configuration(Zone.zone2());
// ...其他引數參考類註釋
UploadManager uploadManager = new UploadManager(cfg);
// ...生成上傳憑證，然後準備上傳
String accessKey = "P63Fl_oUacfVwpMGuiR826rc7byWqwqyy_OBIVm3";
String secretKey = "yL_Uk2M3b68aM96ZC2dW-F8eir0R2Vuq5vE9wItz";
String bucket = "testdemo";
// 如果是Windows情況下，格式是 D:\\qiniu\\test.png
String localFilePath =uploadFile;
// 預設不指定key的情況下，以檔案內容的hash值作為檔名
String key = fileName;
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
try{
Response response = uploadManager.put(localFilePath, key, upToken);
// 解析上傳成功的結果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),
DefaultPutRet.class);
System.out.println(putRet.key);
System.out.println(putRet.hash);
}catch(Exception ex){
return "上傳失敗"+ex.getMessage();
}
return "上傳成功";
}
}啟動springboot
package cn.itsource;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class QiNiuRunApp {
public static void main(String[] args) {
SpringApplication.run(QiNiuRunApp.class, args);
}
}測試
@RunWith(SpringJUnit4ClassRunner.class)
@SpringBootTest(classes = QiNiuRunApp.class)
public class QiNiuTest {
@Test
public void testupload() throws Exception {
// 第一個引數 上傳檔案的位置
// 第二個上傳檔案的名稱
String result = FileUploadUtils.fileUploadToQiNiu("C:\\畫圖\\io.png","my.png");
System.out.println(result);
}
}前臺點選按鈕上傳七牛雲:選擇的是七牛雲JavaScript SDK開發文件
注意:七牛雲的官方開發文件是不完善的,有些地方需要注意;
第一 前臺修改 註釋不用管 可以用來測試其他功能
所需外掛(放在webapp下即可)百度資源:https://pan.baidu.com/s/1bK839-RHge9y0QyfNV0GsA
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/plupload.full.min.js"></script>
<script type="text/javascript" src="/static/qiniu.js"></script>
</head>
<body>
<!-- 自己建立div,官方文件是沒有的 -->
<div id="container">
<button id="pickfiles">上次檔案</button>
<img id="imgUrl" src="/static/1.PNG" style="height: 200px; width: 200px">
</div>
</body>
<script type="text/javascript">
var uploader = Qiniu.uploader({
runtimes : 'html5,flash,html4', // 上傳模式，依次退化
// 上傳選擇的點選按鈕，必需 修改成自己的
browse_button : 'pickfiles',
// 在初始化時，uptoken，uptoken_url，uptoken_func三個引數中必須有一個被設定
// 切如果提供了多個，其優先順序為uptoken > uptoken_url > uptoken_func
// 其中uptoken是直接提供上傳憑證，uptoken_url是提供了獲取上傳憑證的地址，如果需要定製獲取uptoken的過程則可以設定uptoken_func
// uptoken : '<Your upload token>', // uptoken是上傳憑證，由其他程式生成
uptoken_url : '/upload/uptoken', // Ajax請求uptoken的Url，強烈建議設定（服務端提供）
// uptoken_func: function(){ // 在需要獲取uptoken時，該方法會被呼叫
// // do something
// return uptoken;
// },
get_new_uptoken : true, // 設定上傳檔案的時候是否每次都重新獲取新的uptoken
// downtoken_url: '/downtoken',
// Ajax請求downToken的Url，私有空間時使用，JS-SDK將向該地址POST檔案的key和domain，
//服務端返回的JSON必須包含url欄位，url值為該檔案的下載地址
// unique_names: true, // 預設false，key為檔名。若開啟該選項，JS-SDK會為每個檔案自動
//生成key（檔名）
// save_key: true, // 預設false。若在服務端生成uptoken的上傳策略中指定了sava_key，
//則開啟，SDK在前端將不對key進行任何處理
//修改成自己的bucket域名 下載資源時用到，必需
domain : 'pi5zfw3xm.bkt.clouddn.com',
//修改成自己的div的id
container : 'container', // 上傳區域DOM ID，預設是browser_button的父元素
max_file_size : '100mb', // 最大檔案體積限制
flash_swf_url : 'path/of/plupload/Moxie.swf', //引入flash，相對路徑
max_retries : 3, // 上傳失敗最大重試次數
dragdrop : true, // 開啟可拖曳上傳
drop_element : 'container', // 拖曳上傳區域元素的ID，拖曳檔案或資料夾後可觸發上傳
chunk_size : '4mb', // 分塊上傳時，每塊的體積
auto_start : true, // 選擇檔案後自動上傳，若關閉需要自己繫結事件觸發上傳
//x_vars : {
// 檢視自定義變數
// 'time' : function(up,file) {
// var time = (new Date()).getTime();
// do something with 'time'
// return time;
// },
// 'size' : function(up,file) {
// var size = file.size;
// do something with 'size'
// return size;
// }
//},
init : {
'FilesAdded' : function(up, files) {
plupload.each(files, function(file) {
// 檔案新增進佇列後，處理相關的事情
});
},
'BeforeUpload' : function(up, file) {
// 每個檔案上傳前，處理相關的事情
},
'UploadProgress' : function(up, file) {
// 每個檔案上傳時，處理相關的事情
},
'FileUploaded' : function(up, file, info) {
// 每個檔案上傳成功後，處理相關的事情
// 其中info.response是檔案上傳成功後，服務端返回的json，形式如：
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
// 檢視簡單反饋
var domain = up.getOption('domain');
//var res = parseJSON(info.response);
var res=JSON.parse(info);
var sourceLink = domain + res.key;//獲取上傳成功後的檔案的Url
//把頁面圖片路徑從七牛雲獲取顯示
$("#imgUrl").attr("src",sourceLink);
},
'Error' : function(up, err, errTip) {
//上傳出錯時，處理相關的事情
alert('上傳失敗',err)
},
'UploadComplete' : function() {
//佇列檔案處理完畢後，處理相關的事情
},
//設定檔名
'Key' : function(up, file) {
// 若想在前端對每個檔案的key進行個性化處理，可以配置該函式
// 該配置必須要在unique_names: false，save_key: false時才生效
var key =guid();
// do something with key here
return key
}
}
});
// domain為七牛空間對應的域名，選擇某個空間後，可通過 空間設定->基本設定->域名設定 檢視獲取
// uploader為一個plupload物件，繼承了所有plupload的方法
//用於生成隨機數
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16); }); }
</script>
</html>第二 建立一個Controller訪問上傳檔案頁面
package cn.itsource.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.qiniu.util.Auth;
@Controller
public class IndexController {
//訪問上傳檔案頁面
@RequestMapping("/")
public String index() {
return "upload";
}
}第三 對前臺請求在後臺完成上傳檔案功能
package cn.itsource.controller;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.google.gson.Gson;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
@Controller
@RequestMapping("/upload")
public class UploadController {
// ...生成上傳憑證，然後準備上傳 從yml配置檔案取出
@Value("${qiniu.accessKey}")
String accessKey;
@Value("${qiniu.secretKey}")
String secretKey;
@Value("${qiniu.bucket}")
String bucket;
@Value("${qiniu.domain}")
String domain;
// 獲取上傳憑證
@RequestMapping("/uptoken")
@ResponseBody
public Object getUptoken() {
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
@SuppressWarnings("rawtypes")
Map<String, Object> map = new HashMap();
map.put("uptoken", upToken);
return map;
}
}第四 配置application.yml/等於application.xml,注意結構層次
#設定埠
server:
port:8080
#設定上傳檔案大小
spring:
http:
multipart:
maxFileSize: 100Mb
maxRequestSize: 1000Mb
#設定檢視解析器
mvc:
view:
prefix: /WEB-INF/jsp/
suffix: .jsp
#日誌列印
logging:
level:
cn:
itsource: DEBUG
#七牛雲配置 上傳憑證AccessKey，SecretKey和Bucket
qiniu:
accessKey: P63Fl_oUacfVwpMGuiR826rc7byWqwqyy_OBIVm3
secretKey: yL_Uk2M3b68aM96ZC2dW-F8eir0R2Vuq5vE9wItz
domain: http://pi5zfw3xm.bkt.clouddn.com/
bucket: testdemo