🍱 updating assets.

spring-boot-demo-upload/src/main/java/com/xkcoding/springbootdemoupload/SpringBootDemoUploadApplication.java → spring-boot-demo-upload/src/main/java/com/xkcoding/upload/SpringBootDemoUploadApplication.java

@@ -1,4 +1,4 @@
-package com.xkcoding.springbootdemoupload;
+package com.xkcoding.upload;
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
@@ -8,7 +8,7 @@ import org.springframework.boot.autoconfigure.SpringBootApplication;
  * 启动类
  * </p>
  *
- * @package: com.xkcoding.springbootdemoupload
+ * @package: com.xkcoding.upload
  * @description: 启动类
  * @author: shenyangkai
  * @date: Created in 2018/10/20 21:23

spring-boot-demo-upload/src/main/java/com/xkcoding/upload/config/UploadConfig.java

@@ -0,0 +1,105 @@
+package com.xkcoding.upload.config;
+
+import com.qiniu.common.Zone;
+import com.qiniu.storage.BucketManager;
+import com.qiniu.storage.UploadManager;
+import com.qiniu.util.Auth;
+import org.springframework.beans.factory.annotation.Autowired;
+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.servlet.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 javax.servlet.MultipartConfigElement;
+import javax.servlet.Servlet;
+
+/**
+ * <p>
+ * 上传配置
+ * </p>
+ *
+ * @package: com.xkcoding.upload.config
+ * @description: 上传配置
+ * @author: yangkai.shen
+ * @date: Created in 2018/10/23 14:09
+ * @copyright: Copyright (c) 2018
+ * @version: V1.0
+ * @modified: yangkai.shen
+ */
+@Configuration
+@ConditionalOnClass({Servlet.class, StandardServletMultipartResolver.class, MultipartConfigElement.class})
+@ConditionalOnProperty(prefix = "spring.http.multipart", name = "enabled", matchIfMissing = true)
+@EnableConfigurationProperties(MultipartProperties.class)
+public class UploadConfig {
+	@Value("${qiniu.accessKey}")
+	private String accessKey;
+
+	@Value("${qiniu.secretKey}")
+	private String secretKey;
+
+	private final MultipartProperties multipartProperties;
+
+	@Autowired
+	public UploadConfig(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());
+	}
+
+	/**
+	 * 认证信息实例
+	 */
+	@Bean
+	public Auth auth() {
+		return Auth.create(accessKey, secretKey);
+	}
+
+	/**
+	 * 构建七牛空间管理实例
+	 */
+	@Bean
+	public BucketManager bucketManager() {
+		return new BucketManager(auth(), qiniuConfig());
+	}
+}

spring-boot-demo-upload/src/main/java/com/xkcoding/springbootdemoupload/controller/IndexController.java → spring-boot-demo-upload/src/main/java/com/xkcoding/upload/controller/IndexController.java

@@ -1,4 +1,4 @@
-package com.xkcoding.springbootdemoupload.controller;
+package com.xkcoding.upload.controller;
 
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -8,7 +8,7 @@ import org.springframework.web.bind.annotation.GetMapping;
  * 首页Controller
  * </p>
  *
- * @package: com.xkcoding.springbootdemoupload.controller
+ * @package: com.xkcoding.upload.controller
  * @description: 首页Controller
  * @author: shenyangkai
  * @date: Created in 2018/10/20 21:22

spring-boot-demo-upload/src/main/resources/application.yml

@@ -1,4 +1,14 @@
 server:
   port: 8080
   servlet:
-    context-path: /demo
+    context-path: /demo
+qiniu:
+  accessKey: ## 此处填写你自己的七牛云 access key
+  secretKey: ## 此处填写你自己的七牛云 secret key
+spring:
+  servlet:
+    multipart:
+      enabled: true
+      location: /Users/yangkai.shen/Documents/code/back-end/spring-boot-demo/spring-boot-demo-upload/tmp
+      file-size-threshold: 5MB
+      max-file-size: 20MB

spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/README.md

@@ -1,25 +0,0 @@
-目录说明
-========================
-
-```bash
-├── Uploader.swf                      # SWF文件，当使用Flash运行时需要引入。
-├
-├── webuploader.js                    # 完全版本。
-├── webuploader.min.js                # min版本
-├
-├── webuploader.flashonly.js          # 只有Flash实现的版本。
-├── webuploader.flashonly.min.js      # min版本
-├
-├── webuploader.html5only.js          # 只有Html5实现的版本。
-├── webuploader.html5only.min.js      # min版本
-├
-├── webuploader.noimage.js            # 去除图片处理的版本，包括HTML5和FLASH.
-├── webuploader.noimage.min.js        # min版本
-├
-├── webuploader.custom.js             # 自定义打包方案，请查看 Gruntfile.js，满足移动端使用。
-└── webuploader.custom.min.js         # min版本
-```
-
-## 示例
-
-请把整个 Git 包下载下来放在 php 服务器下，因为默认提供的文件接受是用 php 编写的，打开 examples 页面便能查看示例效果。

spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.css

@@ -1,28 +0,0 @@
-.webuploader-container {
-	position: relative;
-}
-.webuploader-element-invisible {
-	position: absolute !important;
-	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-    clip: rect(1px,1px,1px,1px);
-}
-.webuploader-pick {
-	position: relative;
-	display: inline-block;
-	cursor: pointer;
-	background: #00b7ee;
-	padding: 10px 15px;
-	color: #fff;
-	text-align: center;
-	border-radius: 3px;
-	overflow: hidden;
-}
-.webuploader-pick-hover {
-	background: #00a2d4;
-}
-
-.webuploader-pick-disable {
-	opacity: 0.6;
-	pointer-events:none;
-}
-

spring-boot-demo-upload/src/main/resources/templates/index.html

@@ -1,81 +1,74 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>spring-boot-demo-upload</title>
-    <link href="webuploader-0.1.5/webuploader.css" rel="stylesheet">
-    <script src="jquery/jquery-3.3.1.min.js"></script>
-    <script src="webuploader-0.1.5/webuploader.js"></script>
+	<meta charset="UTF-8">
+	<meta name="viewport"
+	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>spring-boot-demo-upload</title>
+	<!-- import Vue.js -->
+	<script src="//vuejs.org/js/vue.min.js"></script>
+	<!-- import stylesheet -->
+	<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
+	<!-- import iView -->
+	<script src="//unpkg.com/iview/dist/iview.min.js"></script>
 </head>
 <body>
-<div id="uploader" class="wu-example">
-    <!--用来存放文件信息-->
-    <div id="thelist" class="uploader-list"></div>
-    <div class="btns">
-        <div id="picker">选择文件</div>
-        <button id="ctlBtn" class="btn btn-default">开始上传</button>
-    </div>
+<div id="app">
+	<Upload
+			:before-upload="handleLocalUpload"
+			action="//jsonplaceholder.typicode.com/posts/"
+			ref="localUpload"
+			:on-success="handleLocalSuccess"
+			:on-error="handleLocalError"
+	>
+		<i-button icon="ios-cloud-upload-outline">选择文件</i-button>
+	</Upload>
+	<i-button
+			type="primary"
+			@click="localUpload"
+			:loading="localUpload.loadingStatus"
+			:disabled="!localUpload.file">
+		{{ localUpload.loadingStatus ? '上传中' : '上传' }}
+	</i-button>
 </div>
 <script>
-    var uploader = WebUploader.create({
-
-        // swf文件路径
-        swf: 'webuploader-0.1.5/Uploader.swf',
-
-        // 文件接收服务端。
-        server: 'http://webuploader.duapp.com/server/fileupload.php',
-
-        // 选择文件的按钮。可选。
-        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
-        pick: '#picker',
-
-        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
-        resize: false
-    });
-
-    // 当有文件被添加进队列的时候
-    var $list = $("#thelist");
-    uploader.on('fileQueued', function (file) {
-        $list.append('<div id="' + file.id + '" class="item">' +
-            '<h4 class="info">' + file.name + '</h4>' +
-            '<p class="state">等待上传...</p>' +
-            '</div>');
-    });
-
-    // 文件上传过程中创建进度条实时显示。
-    uploader.on( 'uploadProgress', function( file, percentage ) {
-        var $li = $( '#'+file.id ),
-            $percent = $li.find('.progress .progress-bar');
-
-        // 避免重复创建
-        if ( !$percent.length ) {
-            $percent = $('<div class="progress progress-striped active">' +
-                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
-                '</div>' +
-                '</div>').appendTo( $li ).find('.progress-bar');
-        }
-
-        $li.find('p.state').text('上传中');
-
-        $percent.css( 'width', percentage * 100 + '%' );
-    });
-
-    uploader.on( 'uploadSuccess', function( file ) {
-        $( '#'+file.id ).find('p.state').text('已上传');
-    });
-
-    uploader.on( 'uploadError', function( file ) {
-        $( '#'+file.id ).find('p.state').text('上传出错');
-    });
-
-    uploader.on( 'uploadComplete', function( file ) {
-        $( '#'+file.id ).find('.progress').fadeOut();
-    });
-
-
+	new Vue({
+		el: '#app',
+		data: {
+			localUpload: {
+				// 选择文件后，将 beforeUpload 返回的 file 保存在这里，后面会用到
+				file: null,
+				// 标记上传状态
+				loadingStatus: false
+			},
+		},
+		methods: {
+			// beforeUpload 在返回 false 或 Promise 时，会停止自动上传，这里我们将选择好的文件 file 保存在 data里，并 return false
+			handleLocalUpload(file) {
+				this.localUpload.file = file;
+				return false;
+			},
+			// 这里是手动上传，通过 $refs 获取到 Upload 实例，然后调用私有方法 .post()，把保存在 data 里的 file 上传。
+			// iView 的 Upload 组件在调用 .post() 方法时，就会继续上传了。
+			localUpload() {
+				this.localUpload.loadingStatus = true;  // 标记上传状态
+				this.$refs.localUpload.post(this.localUpload.file);
+			},
+			// 上传成功后，清空 data 里的 file，并修改上传状态
+			handleLocalSuccess() {
+				this.localUpload.file = null;
+				this.localUpload.loadingStatus = false;
+				this.$Message.success('上传成功');
+			},
+			// 上传失败后，清空 data 里的 file，并修改上传状态
+			handleLocalError() {
+				this.localUpload.file = null;
+				this.localUpload.loadingStatus = false;
+				this.$Message.error('上传失败');
+			}
+		}
+	})
 </script>
 </body>
 </html>

spring-boot-demo-upload/src/test/java/com/xkcoding/springbootdemoupload/SpringBootDemoUploadApplicationTests.java → spring-boot-demo-upload/src/test/java/com/xkcoding/upload/SpringBootDemoUploadApplicationTests.java

@@ -1,4 +1,4 @@
-package com.xkcoding.springbootdemoupload;
+package com.xkcoding.upload;
 
 import org.junit.Test;
 import org.junit.runner.RunWith;