【クイックスタートシリーズ】Qiniu Cloud + webuploaderを使ってオブジェクトクラウドストレージ(OSS)を実現
ステップ
1. Qiniu クラウドの構成
1. 新しいストレージスペースを作成する
Qiniu Cloud に入り、登録してログインし、コンソールに入り、オブジェクト ストレージ Kodo を選択します。
スペース管理を選択 - 新しいスペースを作成します (30 日間無料)
書き込んだ後、「OK」をクリックします
2. AccessKey と SecretKey を取得する
右上隅のアカウントをクリックし、「キー管理」をクリックします
自分の ak と sk を表示し、保存することができます (ペアのみ)
さらに、独自のスペース名とドメイン名を保存する必要もあります (ドメイン名には有効期限があることに注意してください)。
ドメイン名は次の図に示すとおりです。
次に、webuploader コンポーネントを使用します。
1. ダウンロード
webuploader 公式 Web サイトでコンポーネントをダウンロードします: http://fex.baidu.com/webuploader/
最新バージョンをダウンロードするだけです
2.使用: 2 つの方法
プロジェクト構造: 以下に示すように、ダウンロードした webuploader コンポーネントをそこに配置します (および jquery)
前後端を分離しない方法と前後端を分離する方法に分かれますが、詳しくは後述します。
次に、最初にバックエンド テストを実行します
まず、index.html コードを記述します (パスは変更されています)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>webuploader上传</title>
<script type="text/javascript" src="js/jquery-3.6.0.js" charset="UTF-8"></script>
<!--引入WebUploader文件上传的CSS-->
<link rel="stylesheet" type="text/css" href="css/webuploader.css" media="screen" />
<!--引入WebUploader文件上传的JS-->
<script type="text/javascript" src="js/webuploader.js"></script>
</head>
<body>
<!--用来存放文件信息-->
<div class="uploader-demo">
<!--存放图片的预览图-->
<div id="imgs" style="border: 1px solid black;width: 460px;height: 150px;margin-bottom: 10px;padding: 10px;overflow:scroll;
white-space: nowrap;">
<!-- <img src="xxx" style="width: 100px;height: 130px;margin-right: 10px"/>-->
</div>
<div class="btns">
<input type="hidden" id="imgs_path" name="gimage"/>
<div id="filePicker">选择图片</div>
<button id="ctlBtn" class="mybutton" onclick="upload_imgs()">开始上传</button>
<marquee id="msrcoll" width="235px" direction="right" style="display:none">
图片正在上传，请稍作等待...
</marquee>
</div>
</div>
</body>
<!-- js代码 -->
<script type="text/javascript">
var uploader;
$(function(){
//初始化Web Uploader,每上传一个文件都会创建一个uploader对象，同时选择多个文件时，则会创建多个uploader对象。
uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: false, //true时，选择文件后自动上传。
// swf文件路径
swf: 'js/Uploader.swf',
// 文件接收服务端。
server: '/这里是访问你后端controller层的路径',
// 选择文件的按钮。可选。
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
//给webuploader绑定事件 fileQueued 当文件被加入队列后触发。 file参数表示当前文件对象
uploader.on('fileQueued',function (file) {
//生成图片的缩略图 ret表示缩略图的路径
//makeThumb( file, callback, width, height )
uploader.makeThumb(file,function (error, ret ) {
if (error){
alert(file.name+"缩略图生成失败！");
} else{
//将缩略图放入div容器中
var img="<img src=\""+ret+"\" style=\"width: 100px;height: 130px;margin-right: 10px\"/>";
$("#imgs").append(img);
}
}, 100, 130)
});
//给webuploader绑定上传成功事件
uploader.on("uploadSuccess",function (file,response) {
var value= $("#imgs_path").val();
if(value.length>0){
value+="|";
}
value+=response.uploadPath;
$("#imgs_path").val(value);
if (response.status == 1 && value.length>0) {
alert("上传成功")
$("#msrcoll").css("display","none");
} else {
alert("上传失败")
$("#msrcoll").css("display","none");
}
});
})
//上传图片
function upload_imgs() {
if (uploader){
uploader.upload();
$("#msrcoll").css("display","block");
}
}
</script>
</html>
完了するとこのページは次のようになります
バックエンドコード
バックエンドテストを行う
バックエンド プロジェクトに必要な Maven 依存関係:
pom.xml
<!--七牛云-->
<!-- https://mvnrepository.com/artifact/com.qiniu/qiniu-java-sdk -->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.11.0</version>
</dependency>
<!--七牛云的上传工具类-->
<!--OKHTTP-->
<!-- <dependency>-->
<!-- <groupId>com.squareup.okhttp3</groupId>-->
<!-- <artifactId>okhttp</artifactId>-->
<!-- <version>3.6.0</version>-->
<!-- </dependency>-->
<!--上传-->
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>3.11.0</version>
</dependency>
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>happy-dns-java</artifactId>
<version>0.1.6</version>
<scope>test</scope>
</dependency>
<!--解析json-->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version>
<scope>compile</scope>
</dependency>
<!--springboot-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--如果只是测试，不连数据库下面的不用导-->
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<!--mybatis-plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.0</version>
</dependency>
<!--mysql驱动-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
プロジェクト構造 (フロントエンドとバックエンドが分離された Web アプリなし)
QiniuCloud ツール クラス QiniuCloudUtil.java
ヒント: 上記で保存した 4 つのパラメータを、対応する XXXXXXXXXX に入力します。
package com.example.util;
import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.Region;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.storage.model.FileInfo;
import com.qiniu.util.Auth;
import com.qiniu.util.StringMap;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;
/**
* 七牛云上传文件工具类
* 官方
*/
public class QiniuCloudUtil {
// 设置需要操作的账号的AK和SK （AK和SK均在七牛云中获得，以下会说明）
private static final String ACCESS_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
private static final String SECRET_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
// 要上传的空间 （刚刚新建空间的名称）
private static final String bucketname = "XXXXXXXXXXXXXXXXXXXXXX";
// 密钥
private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
//地区分布实例化
private static final Configuration cfg = new Configuration(Region.huadongZheJiang2());
//新建空间时，七牛云分配出的域名 （自己可在万网购买域名解析后，绑定到加速域名）
private static final String DOMAIN = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
public static String getUpToken() {
//如果希望只能上传指定key的文件，并且不允许修改，那么可以将下面的 insertOnly 属性值设为 1。
return auth.uploadToken(bucketname, null, 3600, new StringMap().put("insertOnly", 1));
}
/**
* 上传文件使用
*
* @return
*/
public static UploadManager init() {
//构造一个带指定 Region 对象的配置类
cfg.resumableUploadAPIVersion = Configuration.ResumableUploadAPIVersion.V2;// 指定分片上传版本
UploadManager uploadManager = new UploadManager(cfg);
return uploadManager;
}
/**
* 本地上传
*/
public static void addLocalImage() {
//如果是Windows情况下，格式是 D:\\qiniu\\test.png
String localFilePath = "E:\\imgs\\logo1.jpg";
//默认不指定key的情况下，以文件内容的hash值作为文件名
String key = null;
Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
String upToken = auth.uploadToken(bucketname);
try {
UploadManager uploadManager = init();
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 (QiniuException ex) {
Response r = ex.response;
System.err.println(r.toString());
try {
System.err.println(r.bodyString());
} catch (QiniuException ex2) {
//ignore
}
}
}
/**
* 通过字节数组传播
*/
public static DefaultPutRet addByBytesImage(byte[] bytes) {
DefaultPutRet putRet = null;
try {
// byte[] uploadBytes = "hello qiniu cloud".getBytes("utf-8");
Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
String upToken = auth.uploadToken(bucketname);
//默认不指定key的情况下，以文件内容的hash值作为文件名
String key = null;
UploadManager uploadManager = init();
try {
Response response = uploadManager.put(bytes, key, upToken);
//解析上传成功的结果
putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
return putRet;
} catch (QiniuException ex) {
Response r = ex.response;
System.err.println(r.toString());
try {
System.err.println(r.bodyString());
} catch (QiniuException ex2) {
//ignore
}
}
} catch (Exception e) {
//ignore
}
return putRet;
}
/**
* @param key 图片的文件名
* @Explain 删除空间中的图片
*/
public static void delete(String key) {
BucketManager bucketManager = new BucketManager(auth, cfg);
try {
bucketManager.delete(bucketname, key);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 查找指定文件信息
*
* @param key
* @return
*/
public static FileInfo getFile(String key) {
BucketManager bucketManager = new BucketManager(auth, cfg);
FileInfo fileInfo = null;
try {
fileInfo = bucketManager.stat(bucketname, key);
} catch (QiniuException ex) {
System.err.println(ex.response.toString());
}
return fileInfo;
}
/**
* 查找所有文件信息
*
* @param
* @return
*/
public static BucketManager.FileListIterator getAllFile() {
//文件名前缀
String prefix = "";
//每次迭代的长度限制，最大1000，推荐值 1000
int limit = 1000;
//指定目录分隔符，列出所有公共前缀（模拟列出目录效果）。缺省值为空字符串
String delimiter = "";
BucketManager bucketManager = new BucketManager(auth, cfg);
//列举空间文件列表
BucketManager.FileListIterator fileListIterator = bucketManager.createFileListIterator(bucketname, prefix, limit, delimiter);
return fileListIterator;
}
/**
* 下载
* fileName 七牛云上存储文件生成的文件名
* @throws IOException
*/
public static List<String> download(String fileName[]) throws IOException {
List<String> list=new ArrayList<>();
for (int i = 0; i < fileName.length; i++) {
String encodedFileName = URLEncoder.encode(fileName[i], "utf-8").replace("+", "%20");
String finalUrl = String.format("%s/%s", DOMAIN, encodedFileName);
list.add(finalUrl);
}
return list;
}
}
テストクラス Test01.java (4 つのパラメータを記述し、画像パスを追加)
package com.example.Test;
import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.Region;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
public class Test01 {
public static void main(String[] args) {
//构造一个带指定Region对象的配置类
Configuration cfg = new Configuration(Region.huadongZheJiang2());
cfg.resumableUploadAPIVersion = Configuration.ResumableUploadAPIVersion.V2;// 指定分片上传版本
//...其他参数参考类注释
UploadManager uploadManager = new UploadManager(cfg);
//...生成上传凭证，然后准备上传
String accessKey = "XXXXXXXXXXXXXXXXXXXXX";
String secretKey = "XXXXXXXXXXXXXXXXXXXXXXXXX";
//空间名称
String bucket = "XXXXX";
//如果是Windows情况下，格式是 D:\\qiniu\\test.png
String localFilePath = "e:\\11.jpg";
//默认不指定key的情况下，以文件内容的hash值作为文件名
String key = null;
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 (QiniuException ex) {
Response r = ex.response;
System.err.println(r.toString());
try {
System.err.println(r.bodyString());
} catch (QiniuException ex2) {
//ignore
}
}
}
}
実行すると、次のようにコンソールがキーとハッシュ値 (つまり、Qiniu Cloud に表示されるアップロードされたファイル名) を返すことがわかります。
次に Qiniuyun に戻り、作成したスペース ファイルを確認すると、ファイルがアップロードされていることがわかります。
それでうまくいきました
Webuploader を使用してファイルをアップロードする
コントローラー層
WebController.java クラス
package com.example.Controller;
import com.example.util.QiniuCloudUtil;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.storage.model.FileInfo;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.HashMap;
import java.util.Map;
@RestController
public class WebController {
// @Autowired
// private QiNiuService qiNiuService;
/**
* 上传图片的方法
* @param files
* @return
* @throws IOException
*/
@PostMapping("/addResource")
public Map<String, Object> test(@RequestParam(name = "file", required = true) MultipartFile[] files) throws IOException {
Map<String, Object> map = new HashMap<>();
byte b[] = new byte[1024];
for (MultipartFile file : files) {
byte[] bytes = file.getBytes();
DefaultPutRet putRet = QiniuCloudUtil.addByBytesImage(bytes);
if (putRet != null) {
// //向数据库中添加信息
// QiNiu qn = new QingNiu();
String key = putRet.key;
String hash = putRet.hash;
// qn.setId(key);
// qn.setCodeid(hash);
// qiNiuService.save(qn);
System.out.println("key:" + key);
System.out.println("hash:" + hash);
} else {
System.out.println("上传失败");
map.put("status",0);
return map;
}
}
System.out.println("上传成功");
map.put("status",1);
return map;
}
@PostMapping ("/delResource")
public void delect(){
QiniuCloudUtil.delete("xxxxxxxxxxxxxxxxxxxx");
}
@GetMapping("/getResource")
public void getFile(){
FileInfo file = QiniuCloudUtil.getFile("xxxxxxxxxxxxxxxxxxxxx");
System.out.println(file.hash);
System.out.println(file.fsize);
System.out.println(file.mimeType);
System.out.println(file.putTime);
}
@GetMapping("/getAllResource")
public void getAllFile(){
BucketManager.FileListIterator fileListIterator = QiniuCloudUtil.getAllFile();
while (fileListIterator.hasNext()) {
//处理获取的file list结果
FileInfo[] items = fileListIterator.next();
for (FileInfo item : items) {
System.out.println("=========================");
System.out.println(item.key);
System.out.println(item.hash);
System.out.println(item.fsize);
System.out.println(item.mimeType);
System.out.println(item.putTime);
System.out.println(item.endUser);
}
}
}
}
画像のアップロード方法はこちら
フロントエンドjsをコントローラーがアクセスするパスに変更します。
Tomcat でプロジェクトを開始する
フロントページを開く
フロントエンドとリアエンドが分離されていない
アイデアを使用してフロントエンドとバックエンドの両方を記述し、新しい Springboot プロジェクトを作成し、図に示すように Web アプリに構造を設定します (上記と同じ)
このプロジェクトのindex.htmlパスを入力してブラウザにアクセスし、直接使用します。
効果：
Qiniuyun に戻ってファイルを確認すると、ファイルが正常にアップロードされていることがわかります。
フロントエンドとリアエンドの分離
以下に示すように、HBuilder を使用してフロントエンドを作成し、新しい Web プロジェクトを作成し、ダウンロードした Webuploader コンポーネントをそこに配置します (および jquery)。
フロントエンドとバックエンドの分離との違いは、ポート上のプロセスではないことと、クロスドメインの問題があるため、クロスドメインの問題を解決する必要があることです。
バックエンドにインターセプタを記述する必要がある
インターセプタ クラス Filter.java
package com.example.util;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "requestFilter", urlPatterns = {
"/*"})
public class Filter implements javax.servlet.Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest request = (HttpServletRequest) servletRequest;
// 此处 setHeader、addHeader 方法都可用。但 addHeader时写多个会报错：“...,but only one is allowed”
response.setHeader("Access-Control-Allow-Origin", "*");
//response.addHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
// 解决预请求（发送2次请求），此问题也可在 nginx 中作相似设置解决。
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Cache-Control,Pragma,Content-Type,Token, Content-Type");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Credentials", "true");
String method = request.getMethod();
if (method.equalsIgnoreCase("OPTIONS")) {
servletResponse.getOutputStream().write("Success".getBytes("utf-8"));
} else {
filterChain.doFilter(servletRequest, servletResponse);
}
}
@Override
public void destroy() {
}
}
次に、SpringBoot スタートアップ クラスにアノテーションを追加します。
//添加过滤器
@ServletComponentScan
それなら普通に使えるよ
HBuilder でindex.html を開いて直接使用すると、結果は上記と同じになります。
データベースに情報をアップロードすれば、自分で情報を書き込むことができます