文章目錄
功能介紹
廢話不多說直接上圖。
代碼
這次主要講的是ajax取文件數據給後端，然後後端要怎麼做文件上傳的處理。其他一些內容就不講了，我的其他幾篇spring boot文章有寫可以去看。
從前端開始寫到服務層，後面的就不寫了，後面的具體看別的教程。
配置application以及全局異常類
先配置一下application，因爲spring boot一開始默認文件上傳最大爲1MB，超出的話就會異常。順便配置一下tomcat的大小，原因的話下面代碼中的註釋鏈接可以看一下。另外要說明一下，如果上傳文件超出配置的話，會報MaxUploadSizeExceededException異常，該異常是在controller層之前報的，所以要寫全局異常類來捕獲。
#文件上傳大小設置,springboot默認文件大小的限制是1MB,值可以使用後綴“MB”或“KB”.如果是想要不限制文件上傳的大小，那麼就把兩個值都設置爲-1
spring:
servlet:
multipart:
#單個數據的大小
max-file-size: 2048MB
#總數據的大小
max-request-size: 2048MB
server:
tomcat:
max-swallow-size: -1 # 最重要的是這一行 捕獲文件大小超出異常注意：https://blog.csdn.net/ifu25/article/details/90173264
@RestControllerAdvice //全局異常類
public class UploadingHandlerInterceptor {
/* spring默認上傳大小1MB 超出大小捕獲異常MaxUploadSizeExceededException */
@ExceptionHandler(MaxUploadSizeExceededException.class)
public RespEntity handleMaxUploadSizeExceededException(MaxUploadSizeExceededException e) {
Map<String,Object> map=new HashMap<>();
map.put("msguploading","文件大小超過2GB，上傳失敗");
String msguploading=(String)map.get("msguploading");
return new RespEntity(RespCode.ERROR,msguploading);
}
}
personal.html
這裏的多選框是用select2插件，這個自行百度。
<div class="col-md-4 column" style="margin: 5%">
<h3>
上傳視頻
</h3>
<form role="form" enctype="multipart/form-data" id="uploadingvideo">
<div class="form-group">
<label for="videoname">視頻名稱
<span class="help-inline" style="color: red">*</span>
<span class="help-inline" style="color: red;font-size:12px">字數不超過30個</span>
</label>
<input type="text" class="form-control" id="videoname" maxlength="30" required/>
</div>
<div class="form-group">
<label class="control-label">視頻標籤
<span class="help-inline" style="color: red">*</span>
<span class="help-inline" style="color: red;font-size:12px">標籤數量不可超過5個</span>
</label>
<div class="">
<select id="speakers" class="form-control speakers" multiple="multiple" required>
<option value="動漫">動漫</option>
<option value="教育">教育</option>
<option value="娛樂">娛樂</option>
<option value="影視">影視</option>
<option value="廣告">廣告</option>
<option value="搞笑">搞笑</option>
<option value="音樂">音樂</option>
<option value="生活">生活</option>
<option value="運動">運動</option>
<option value="科技">科技</option>
<option value="遊戲">遊戲</option>
</select> <!-- select2多選功能-->
</div>
</div>
<div class="form-group">
<label for="introduce">視頻介紹
<span class="help-inline" style="color: red">*</span>
<span class="help-inline" style="color: red;font-size:12px">字數不超過500個</span>
</label>
<textarea name="introduce" class="form-control" id="introduce" maxlength="500" required></textarea>
</div>
<div class="form-group">
<label>文件導入<span class="help-inline" style="color: red">*<a style="cursor:pointer;" title="文件大小不超過2GB;
帶有H.264視頻編碼和AAC音頻編碼的MPEG 4文件;
帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件;
帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。
（如沒按要求的格式，將由系統工作人員審覈後進行格式轉換，部分格式可能轉換失敗而無法發佈）
">文件要求(鼠標懸停此處查看)</a></span></label>
<input type="file" id="file" required/>
<p class="help-block">
選擇你要上傳的視頻
</p>
<button type="submit" class="btn btn-default" style="background: #5cb85c;color: black;float: right">上傳</button>
</div>
</form>
</div>
Personal.js
這裏要注意的是ajax裏面參數的寫法，還有用FormData()獲取表單數據。
參考：ajax實現文件上傳（使用FormData）
SpringBoot文件上傳示例-ajax和REST
//上傳視頻 https://www.cnblogs.com/han-guang-xue/p/9988157.html
$(document).ready(function() {
$("#uploadingvideo").bind("submit",
function(){
var formdata = new FormData(); //FormData（） 文件上傳https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData
formdata.append('vname',$("#videoname").val());
formdata.append('vtag',$("#speakers").val().toString()); //標籤多選框爲數組，要轉換成字符後端才能接收到
formdata.append('introduce',$("#introduce").val());
formdata.append('file', $('#file')[0].files[0]);
$.ajax({
url:"/uploading",
type:"POST",
dataType:"JSON",
// contentType默認的值爲：'application/x-www-form-urlencoded; charset=UTF-8，
// 而文件上傳一個是multipart/form-data，但是請求內容不只是文件上傳。所有使用contentType:false
contentType:false,
//processData參數默認的值爲true，會轉數據格式，上傳不需要轉，所有使用processData: false
processData:false,
data:formdata,
success:function (data) {
if (data.code==0){
alert('上傳成功');
}
if (data.code==-1){
alert(data.data);
}
}
})
return false;
});
});
PersonalController .java
@RestController
public class PersonalController { //個人中心的控制層
@Autowired
private UserService userService;
@PostMapping("/uploading") //上傳視頻
public RespEntity uploadingVideo(HttpServletRequest request,@RequestParam("file") MultipartFile file,
@RequestParam(value = "vname") String vname, @RequestParam(value = "vtag") String vtag,
@RequestParam(value = "introduce") String introduce)
{
Map<String,Object> map=new HashMap<>();
boolean uploadingvideo=userService.uploadingVideo(request,vname,vtag,introduce,map,file);
String msguploading=(String)map.get("msguploading");
if (uploadingvideo==true){
return new RespEntity(RespCode.SUCCESS);
}else{
return new RespEntity(RespCode.ERROR,msguploading);
}
}
}
UserServiceImpl.java和UserService.java
參考：SpringBoot上傳文件實現
springboot2.0上傳文件（視頻，圖片）到服務器硬盤，並保存路徑至mysql,返回可直接訪問的url
@Service
public class UserServiceImpl implements UserService { //處理用戶相關的服務
@Autowired
private VideoMapper videoMapper;
@Override
public boolean uploadingVideo(HttpServletRequest request, String vname,
String vtag, String introduce, Map<String, Object> map, MultipartFile file)
{
//文件上傳
// 獲取文件名，帶後綴
String originalFilename = file.getOriginalFilename();
// 獲取文件的後綴格式
String fileSuffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1).toLowerCase();
//（加個時間戳，儘量避免文件名稱重複）保存的文件名爲: "+vname.xxx+"\n,xxx指的是fileSuffix獲得的後綴
String fileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" + vname+"."+fileSuffix;
// 該方法返回的爲當前項目的工作目錄，即在哪個地方啓動的java線程 當前爲E:\graduation\videoweb
String dirPath = System.getProperty("user.dir");
//文件存儲路徑
String path = dirPath+"/src/main/resources/static/video/videourl/false/" +fileName;
//創建文件路徑
File dest = new File(path);
//判斷文件是否已經存在
if (dest.exists())
{
map.put("msguploading","上傳失敗,文件已存在.");
return false;
}
//判斷文件父目錄是否存在
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdir();
}
try {
//上傳文件
file.transferTo(dest); //保存文件
//數據存入數據庫
User loginUser = (User)request.getSession().getAttribute("loginUser");
Video video =new Video();
video.setUid(loginUser.getUid());
video.setVtag(vtag);
video.setVname(vname);
video.setDate(new Date());
video.setIntroduce(introduce);
video.setUrl("/video/videourl/true/" +fileName);
videoMapper.inservideo(video);
} catch (IOException e) {
map.put("msguploading","上傳失敗,請先檢查上傳文件是否按照要求，若不能解決再聯繫管理員.");
return false;
}
return true;
}
public interface UserService{
boolean uploadingVideo(HttpServletRequest request, String vname, String vtag, String introduce, Map<String,Object> map, MultipartFile file);//上傳視頻
}