springboot webuploader 圖片上傳至七牛雲。
阿新 • • 發佈：2019-02-19
首先要註冊七牛雲。
後端
pom.xml 檔案配置依賴外掛。
<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.16.RELEASE</version> </parent> <!-- 編譯級別 --> <properties> <java.version>1.8</java.version> </properties> <dependencies> <!-- Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.0.0</version> </dependency> <!-- 七牛雲 --> <dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>[7.2.0, 7.2.99]</version> </dependency> <!--JSP解析器 --> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> </dependency> <!-- JSTL標籤庫 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</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> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>
application.properties資原始檔配置
logging.level.fairy.lixin.movie.mapper=debug #JSP VIEW spring.mvc.view.suffix=.jsp spring.mvc.view.prefix=/WEB-INF/ # qiniu \u6CE8\u610F\u66FF\u6362\u6210\u81EA\u5DF1\u7533\u8BF7\u7684\u914D\u7F6E qiniu.AccessKey=NIDlGMhXW1TDYOdnCeV0D1vxMx3wuDkEJMERT4WB qiniu.SecretKey=SMv6Mw4p3fuhxApdmwWsktiDX3dXzXpbw1GJhC4v qiniu.Bucket=racker qiniu.cdn.prefix=http://phjwsbqz3.bkt.clouddn.com/
application-dev.properties資源配置
# thymeleaf
spring.thymeleaf.cache=false
# multipart config
spring.http.multipart.enabled=true
spring.http.multipart.location=D:\yk_temp
ApplicationRun.java Springboot的啟動類
/** * */ package webUpload; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; /** * @author FairlTail * @date 2018年11月1日 * @version 1.0 * */ @SpringBootApplication public class ApplicationRun { public static void main(String[] args) { SpringApplication.run(ApplicationRun.class, args); } }
upload.java
/**
*
*/
package webUpload.controller;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.Map;
import javax.servlet.http.HttpSession;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import webUpload.base.ApiResponse;
import webUpload.base.QiNiuPutRet;
import webUpload.service.IQiNiuService;
/**
* @author FairlTail
* @date 2018年11月1日
* @version 1.0
*
*/
@Controller
public class upload {
@Autowired
private IQiNiuService qiNiuService;
@Autowired
private Gson gson;
/**
* 上傳圖片介面
* @param file
* @return
*/
@PostMapping(value = "admin/upload/photo", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
@ResponseBody
public ApiResponse uploadPhoto(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return ApiResponse.ofStatus(ApiResponse.Status.NOT_VALID_PARAM);
}
String fileName = file.getOriginalFilename();
try {
InputStream inputStream = file.getInputStream();
Response response = qiNiuService.uploadFile(inputStream);
if (response.isOK()) {
QiNiuPutRet ret = gson.fromJson(response.bodyString(), QiNiuPutRet.class);
return ApiResponse.ofSuccess(ret);
} else {
return ApiResponse.ofMessage(response.statusCode, response.getInfo());
}
} catch (QiniuException e) {
Response response = e.response;
try {
return ApiResponse.ofMessage(response.statusCode, response.bodyString());
} catch (QiniuException e1) {
e1.printStackTrace();
return ApiResponse.ofStatus(ApiResponse.Status.INTERNAL_SERVER_ERROR);
}
} catch (IOException e) {
return ApiResponse.ofStatus(ApiResponse.Status.INTERNAL_SERVER_ERROR);
}
}
}
config配置 WebFileUploadConfig.java
package webUpload.config;
import javax.servlet.MultipartConfigElement;
import javax.servlet.Servlet;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.autoconfigure.condition.ConditionalOnClass;
import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean;
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
import org.springframework.boot.autoconfigure.web.MultipartProperties;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.support.StandardServletMultipartResolver;
import org.springframework.web.servlet.DispatcherServlet;
import com.google.gson.Gson;
import com.qiniu.common.Zone;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
/**
*
* @author FairlTail
* @date 2018年11月2日
* @version 1.0
*
*/
@Configuration
@ConditionalOnClass({Servlet.class, StandardServletMultipartResolver.class, MultipartConfigElement.class})
@ConditionalOnProperty(prefix = "spring.http.multipart", name = "enabled", matchIfMissing = true)
@EnableConfigurationProperties(MultipartProperties.class)
public class WebFileUploadConfig {
private final MultipartProperties multipartProperties;
public WebFileUploadConfig(MultipartProperties multipartProperties) {
this.multipartProperties = multipartProperties;
}
/**
* 上傳配置
*/
@Bean
@ConditionalOnMissingBean
public MultipartConfigElement multipartConfigElement() {
return this.multipartProperties.createMultipartConfig();
}
/**
* 註冊解析器
*/
@Bean(name = DispatcherServlet.MULTIPART_RESOLVER_BEAN_NAME)
@ConditionalOnMissingBean(MultipartResolver.class)
public StandardServletMultipartResolver multipartResolver() {
StandardServletMultipartResolver multipartResolver = new StandardServletMultipartResolver();
multipartResolver.setResolveLazily(this.multipartProperties.isResolveLazily());
return multipartResolver;
}
/**
* 華東機房
*/
@Bean
public com.qiniu.storage.Configuration qiniuConfig() {
return new com.qiniu.storage.Configuration(Zone.zone0());
}
/**
* 構建一個七牛上傳工具例項
*/
@Bean
public UploadManager uploadManager() {
return new UploadManager(qiniuConfig());
}
@Value("${qiniu.AccessKey}")
private String accessKey;
@Value("${qiniu.SecretKey}")
private String secretKey;
/**
* 認證資訊例項
* @return
*/
@Bean
public Auth auth() {
return Auth.create(accessKey, secretKey);
}
/**
* 構建七牛空間管理例項
*/
@Bean
public BucketManager bucketManager() {
return new BucketManager(auth(), qiniuConfig());
}
@Bean
public Gson gson() {
return new Gson();
}
}
介面 IQiNiuService.java
package webUpload.service;
import java.io.InputStream;
import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
/**
*
* @author FairlTail
* @date 2018年11月2日
* @version 1.0
*
*/
public interface IQiNiuService {
Response uploadFile(InputStream inputStream) throws QiniuException;
}
介面實現 QiNiuServiceImpl.java
package webUpload.service;
import java.io.InputStream;
import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
import com.qiniu.util.StringMap;
/**
*
* @author FairlTail
* @date 2018年11月2日
* @version 1.0
*
*/
@Service
public class QiNiuServiceImpl implements IQiNiuService, InitializingBean {
@Autowired
private UploadManager uploadManager;
@Autowired
private Auth auth;
@Value("${qiniu.Bucket}")
private String bucket;
private StringMap putPolicy;
@Override
public Response uploadFile(InputStream inputStream) throws QiniuException {
Response response = this.uploadManager.put(inputStream, null, getUploadToken(), null, null);
int retry = 0;
while (response.needRetry() && retry < 3) {
response = this.uploadManager.put(inputStream, null, getUploadToken(), null, null);
retry++;
}
return response;
}
@Override
public void afterPropertiesSet() throws Exception {
this.putPolicy = new StringMap();
putPolicy.put("returnBody", "{\"key\":\"$(key)\",\"hash\":\"$(etag)\",\"bucket\":\"$(bucket)\",\"width\":$(imageInfo.width), \"height\":${imageInfo.height}}");
}
/**
* 獲取上傳憑證
* @return
*/
private String getUploadToken() {
return this.auth.uploadToken(bucket, null, 3600, putPolicy);
}
}
base。
QiNiuPutRet.java
package webUpload.base;
/**
*
* @author FairlTail
* @date 2018年11月2日
* @version 1.0
*
*/
public final class QiNiuPutRet {
public String key;
public String hash;
public String bucket;
public int width;
public int height;
@Override
public String toString() {
return "QiNiuPutRet{" +
"key='" + key + '\'' +
", hash='" + hash + '\'' +
", bucket='" + bucket + '\'' +
", width=" + width +
", height=" + height +
'}';
}
}
ApiResponse.java
package webUpload.base;
/**
*
* @author FairlTail
* @date 2018年11月2日
* @version 1.0
*
*/
public class ApiResponse {
private int code;
private String message;
private Object data;
private boolean more;
public ApiResponse(int code, String message, Object data) {
this.code = code;
this.message = message;
this.data = data;
}
public ApiResponse() {
this.code = Status.SUCCESS.getCode();
this.message = Status.SUCCESS.getStandardMessage();
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public boolean isMore() {
return more;
}
public void setMore(boolean more) {
this.more = more;
}
public static ApiResponse ofMessage(int code, String message) {
return new ApiResponse(code, message, null);
}
public static ApiResponse ofSuccess(Object data) {
return new ApiResponse(Status.SUCCESS.getCode(), Status.SUCCESS.getStandardMessage(), data);
}
public static ApiResponse ofStatus(Status status) {
return new ApiResponse(status.getCode(), status.getStandardMessage(), null);
}
public enum Status {
SUCCESS(200, "OK"),
BAD_REQUEST(400, "Bad Request"),
NOT_FOUND(404, "Not Found"),
INTERNAL_SERVER_ERROR(500, "Unknown Internal Error"),
NOT_VALID_PARAM(40005, "Not valid Params"),
NOT_SUPPORTED_OPERATION(40006, "Operation not supported"),
NOT_LOGIN(50000, "Not Login");
private int code;
private String standardMessage;
Status(int code, String standardMessage) {
this.code = code;
this.standardMessage = standardMessage;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getStandardMessage() {
return standardMessage;
}
public void setStandardMessage(String standardMessage) {
this.standardMessage = standardMessage;
}
}
}
前臺
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css"
href="/static/webuploader-0.1.5/css/webuploader.css">
<!--引入JS-->
<body>
<div class="uploader-list-container"
style="width: 60%; height: 30%; position: relative; margin-left: 17%;background-color: red">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker-2"></div>
<p>或將照片拖到這裡，單次最多可選5張</p>
</div>
</div>
<div class="statusBar" style="display: none;">
<div class="progress">
<span class="text">0%</span> <span class="percentage"></span>
</div>
<div class="info"></div>
<div class="btns">
<div id="filePicker2"></div>
<div class="uploadBtn">開始上傳</div>
</div>
</div>
</div>
<div class="upload-photo-ids-container">
<!--這裡放上傳OK圖片的資訊 在表單中一起上傳-->
</div>
<script type="text/javascript" src="/static/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/webuploader-0.1.5/dist/webuploader.min.js"></script>
<script type="text/javascript" src="/static/jquery/upload.js"></script>
</body>
</html>
static在我的資原始檔裡有。