上傳功能 使用的是Element UI 提供的 Upload插件
前端:
<template>
<div>
<!-- 上傳文件 -->
<el-card style="height:400px;overflow-y:auto;">
<div style="width:250px;">
<el-upload
class="upload-demo"
:action="uploadUrl"
:before-upload='checkFileType'
:limit="1"
:data="uploadParamData"
:on-remove="handleRemove"
ref="test"
:auto-upload="false"
:on-success="afterSuccess"
>
<el-button size="small" type="primary">選擇文件</el-button>
</el-upload>
<div slot="tip" class="el-upload__tip" style="margin-top:10px">只能上傳<b class="fonta_"> .xlsx </b> 和<b class="fonta_"> .xls </b>文件</div>
<el-button size="small" type="primary" plain @click="submint" style="margin-top:30px">確認上傳</el-button>
</div>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: this.$store.state.userBean, //{"userId":"","username":"","deptId":"","dept":""}
/******************************** 上傳文件相關 ********************************/
uploadUrl:'', //上傳路徑
uploadParamData:{ //上傳參數
userId:this.$store.state.userBean.userId,
userName:this.$store.state.userBean.username,
UploadFile:'',
},
};
},
methods: {
submint(){
this.$refs.test.submit();// Element UI 提供的提交 方法
},
//上傳成功後執行
afterSuccess(response, file, fileList){
console.log('上傳結果返回的值=',response)
this.$message.warning(response.returnData);
this.$refs.test.clearFiles();//清空上傳列表
},
handleRemove(file) {
return true; //直接刪除
},
//檢查文件類型
checkFileType(file){
let fileType = file.name.substr(file.name.lastIndexOf('.'),file.name.length-1)
if(fileType!='.xlsx' && fileType!='.xls'){
this.$message.warning(`${file.name} 不符合上傳文件類型`);
return false;
}
this.uploadParamData.UploadFile = file.name;
},
},
created(){
this.uploadUrl = `${fss}/dcb/upload`;
}
};
</script>
後端:
/**
* 導入 --->資產信息
* @param request
* @return
* @throws IOException
* @throws DbException
*/
@RequestMapping(value = "/upload",method = RequestMethod.POST)
@ResponseBody
public AjaxJsonResult uploadFile(HttpServletRequest request,@RequestParam("file") MultipartFile file){
AjaxJsonResult ajr = new AjaxJsonResult();
ajr.setOperSuc("上傳失敗");
try {
String fileName = file.getOriginalFilename(); /*獲取文件名*/
String suffixName = fileName.substring(fileName.lastIndexOf(".")); /*獲取文件的後綴名*/
System.out.println("獲取文件名 ="+fileName);
System.out.println("獲取文件的後綴名 ="+suffixName);
String filePath = "C:\\Users\\fan\\Desktop\\圖片\\"; /*保存 文件路徑*/
File newFile = new File(filePath + fileName);
if (!newFile.getParentFile().exists()) { /*檢測是否存在目錄*/
newFile.getParentFile().mkdirs();
}
file.transferTo(newFile);
ajr.setOperSuc("上傳成功");
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}finally {
return ajr;
}
}
注:
@RequestParam("file") MultipartFile file 註解中接收的參數名爲 file 和前端傳到的值的名字無關 (雖然目前也不知道爲啥)