Java:bootstrap fileinput组件结合阿里云oss实现上传图片、视频功能

前段时间都没有更博客，因为去做小程序期末作业去了，这次期末作业我使用了SpringBoot v2脚手架（Gitee上有地址），把后台基本搭出来还是十分迅速的，没几天我就做完了~

因为那个脚手架默认封装的是七牛云和dropzone插件，但是我用的是阿里云OSS服务和bootstrap fileinput插件，所以我就特地来记录一下~

希望可以给看到这篇文章的有需要的人一点点帮助=3=

一、效果图

---

二、前期准备

①阿里云开通OSS服务

第一步：创建Bucket

第二步：申请AccessKey

---

②下载好bootstrap inputfile插件

地址：https://github.com/kartik-v/bootstrap-fileinput

---

③提前说明

第一：我是用springboot v2脚手架做的开发，后端框架顾名思义就是用springboot啦

第二：它默认渲染列表是使用bootstrap-table组件，弹出层是使用layui的弹出层

第三：由于时间问题这篇博文只更我所掌握的bootstrap-inputfile插件和阿里云oss文件存储结合使用的方法，是针对java语言的

第四：在这里推荐一下springboot v2这款脚手架，由于我是第一次用springboot框架，用这个脚手架花了四天时间就把我的后台搭完了，它支持自动生成代码的功能帮我节约了不少时间~

地址：https://gitee.com/bdj/SpringBoot_v2/

---

④在pom.xml里配置一下aliyunOSS

---

三、具体流程

①在你需要执行上传图片或视频的功能的页面，导入以下文件

第一步：用link标签导入fileinput.css文件（或者是fileinput.min.css文件）

---

第二步：用script标签导入fileinput.js文件（或者是fileinput.min.js文件）

---

第三步：用script标签导入zh.js文件（表示是中文，还有需要注意先把第二步的fileinput.js文件导入再导入这个文件）

---

②先写上传组件的静态代码（以上传图片功能代码为例）

<!-- 上传到阿里云服务器 -->
<div class="form-group">
    <label class="col-sm-3 control-label">图片上传:</label>
    <div class="col-sm-8">
        <input id="file" name="myfile" type="file" multiple data-show-caption="true">
        <p class="help-block">支持jpg、jpeg、png格式，大小不超过2.0M</p>
    </div>
</div>

---

③写上传组件的逻辑处理代码

	<script type="text/javascript">
		function initFileInput(ctrlName, uploadUrl) {
			var control = $('#' + ctrlName);
			control.fileinput({
				language : 'zh', //设置语言
				uploadUrl : uploadUrl, //上传地址
				showUpload : false, //是否显示上传按钮
				showRemove : true,
				dropZoneEnabled : false,
				showCaption : true,//是否显示标题
				initialPreviewConfig:[
					{type:"image",fileType:"image"}
				], 
				allowedPreviewTypes : [ 'image' ],
				allowedFileTypes : [ 'image' ],
				allowedFileExtensions : [ 'jpg', 'png' ],
				maxFileSize : 2000,
				maxFileCount : 1,				
			}).on('filepreupload', function(event, data, previewId, index) {     //上传前
				
	            var files = data.files, extra = data.extra,
	            response = data.response, reader = data.reader;
			
	        }).on("filebatchselected", function(event, files) {//选择文件后处理事件
					
	        	$(this).fileinput("upload");//文件上传方法
				
			}).on('fileerror', function(event, data, msg) {
				console.log("event:"+event);
				console.log("data:"+data);
				console.log("msg:"+msg);
				
			}).on("fileuploaded", function(event, data) {//上传成功后处理方法	
				$("#path").attr("value", data.response);
			});
		}

		$(function() {
			var path = window.rootPath + "/OssController/oss";
			initFileInput("file", path);
		})
	</script>

---

④写OSS的工具类(写这个的时候借鉴了一下网上的几位大佬的方法，在此表示感谢)

package com.fc.test.common.support;

import java.io.ByteArrayInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.Date;

import org.springframework.web.multipart.MultipartFile;

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import com.aliyun.oss.model.ObjectMetadata;

//配置阿里云的OSS文件上传的
public class OssFileUtils {

	   private static String endpoint = "http://oss-cn-你申请bucket的地区.aliyuncs.com";

	   private static String accessKeyId = "你的accessKeyId";

	   private static String accessKeySecret = "你的accessKeySecret";

	   private static String bucketName = "你的bucketname";


	   public static String getcontentType(String FilenameExtension) {
	        if (FilenameExtension.equalsIgnoreCase(".bmp")) {
	            return "image/bmp";
	        }
	        if (FilenameExtension.equalsIgnoreCase(".gif")) {
	            return "image/gif";
	        }
	        if (FilenameExtension.equalsIgnoreCase(".jpeg") ||
	                FilenameExtension.equalsIgnoreCase(".jpg") ||
	                FilenameExtension.equalsIgnoreCase(".png")) {
	            return "image/jpg";
	        }
	        if (FilenameExtension.equalsIgnoreCase(".html")) {
	            return "text/html";
	        }
	        if (FilenameExtension.equalsIgnoreCase(".txt")) {
	            return "text/plain";
	        }
	        if (FilenameExtension.equalsIgnoreCase(".vsd")) {
	            return "application/vnd.visio";
	        }
	        if (FilenameExtension.equalsIgnoreCase(".pptx") ||
	                FilenameExtension.equalsIgnoreCase(".ppt")) {
	            return "application/vnd.ms-powerpoint";
	        }
	        if (FilenameExtension.equalsIgnoreCase(".docx") ||
	                FilenameExtension.equalsIgnoreCase(".doc")) {
	            return "application/msword";
	        }
	        if (FilenameExtension.equalsIgnoreCase(".xml")) {
	            return "text/xml";
	        }
	        if (FilenameExtension.equalsIgnoreCase(".mp4")||FilenameExtension.equalsIgnoreCase(".3gp")||FilenameExtension.equalsIgnoreCase(".webm")) {
	            return "video/mp4";
	        }
	        return "image/jpg";
	    }

	   public static String uploadFile(String objectKey, MultipartFile multipartFile)
	           throws OSSException, ClientException, FileNotFoundException {
		/*   System.out.println("是否进入了uploadFile方法");*/
	       // 1.创建OSSClient的实例
	       OSS ossClient  = new OSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret);
	       //StringBuffer sb = new StringBuffer();
	       // 上传的文件不是空，并且文件的名字不是空字符串
	       if (multipartFile.getSize() != 0 && !"".equals(multipartFile.getName())) {
	           ObjectMetadata om = new ObjectMetadata();
	           //设置OSS后台输入地址可以直接访问，而不是下载
	           om.setContentType(getcontentType(objectKey.substring(objectKey.lastIndexOf("."))));
	           om.setContentLength(multipartFile.getSize());
	           // 设置文件上传到服务器的名称
	           om.addUserMetadata("filename", objectKey);
	           try {
	               ossClient.putObject(bucketName, "这里配置你的文件目录，如想上传到a目录的b目录下就写a/b"+objectKey, new ByteArrayInputStream(multipartFile.getBytes()), om);
	           } catch (IOException e) {
	        	   e.printStackTrace();	
	           }
	       }
	       // 设置这个文件地址的有效时间
	       Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10);
	       String url = ossClient.generatePresignedUrl(bucketName, objectKey, expiration).toString();
	       return url;
	   }
	
	}

---

注：对 OssFileUtils类的两个主要强调点，截图如下

---

---

 ⑤写对应的处理逻辑接口

package com.fc.test.controller.gen;

import java.io.FileNotFoundException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.shiro.authz.annotation.RequiresPermissions;
/*import org.json.JSONObject;*/
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.fc.test.common.support.OssFileUtils;
import com.google.gson.Gson;

/*
 * 文件上传到阿里云的OSS的控制层
 * 
 * */
@RestController
@RequestMapping("/OssController")
public class OssController {
	   @PostMapping("/oss")
	   public Object fileUpload(HttpServletRequest request, HttpServletResponse response) {
	       try {    	   
	    	   System.out.println(request+","+response);
	    	   /*System.out.println("是否进入了OssController方法？？？");*/
	    	   //转型为MultipartHttpRequest
	    	   MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
	    	   //获得文件
	    	   MultipartFile multipartFile = multipartRequest.getFile("myfile");
	    	   String fileName = multipartFile.getOriginalFilename();	    	   
	    	
	           OssFileUtils.uploadFile(fileName,multipartFile);
	           Map<String, Object> map= new HashMap<String, Object>();
	           map.put("fileName", fileName);
	           map.put("fileType", multipartFile.getContentType()); 
	           return map;
	       } catch (FileNotFoundException e) {
	           e.printStackTrace();
	       }
		return "false";
	   }

}

---

经此就可以实现上传图片/视频到OSS上的功能啦~

又因为在上传时设置了后缀名，所以可以实现通过URL在线访问图片而不是下载的功能啦~

---

最后，有任何问题欢迎给我留言，本人不定期上线，如果我看到的话就一定会回复你哒>3<

下一篇预定写小程序使用vant-weapp组件库结合阿里云oss实现上传图片/视频功能的博文~