- 使用ElementUI的上传组件 upload
选取文件 只能上传xls,xlsx,doc,docx,pdf格式的文件，且不超过 5M
- vue部分 data 和 methods
export default {
data(){
return:{
//提交文件列表(只用来展示)
fileList:[],
//用于检测后缀名的数组
fileNameMatch:['xls','xlsx','doc','docx','pdf'],
//存放上传文件的对象
uploadFile:{},
//蒙版
updwLoading:'',
//上传地址
uploadUrl:'上传的后台地址',
//保存到数据库的实体
saveDataEntity:{
name:'',
url:''
}
}
},
methods:{
checkFile(file){//上传之前的操作，file上传的文件对象
//下面单独写
},
getFile(item){//上传时操作，item上传时的对象
//下面单独写
}
}
}
- 对上传文件做一定限制
checkFile(file){//上传之前的操作，file上传的文件对象
let name = file.name;
if(name.lastIndexOf('.') == -1){
//（提示）文件格式不正确
return false;
}else{
//获取后缀
let suff = name.substring(name.lastIndexOf('.')+1);
var count = 0;
//遍历提前定义好的后缀数组
for(var i in this.fileNameMatch){
//如果有匹配的(注意大小写问题)
if(this.fileNameMatch[i].toLowerCase() == suff.toLowerCase()){
count ++;
//匹配到就退出循环
break;
}
}
//如果没匹配到
if(count == 0){
//（提示）只能上传xls,xlsx,doc,docx,pdf格式的文件
return false
}
}
//判断文件大小
if(file.size > (1024*1024*5)){
//（提示）文件大小不能超过5M
return false;
}
}
- 手动文件上传异步请求
getFile(item){//上传时操作，item上传时的对象
var app = this;
//存放文件对象
app.uploadFile = item.file;
//创建表单
var formData = new FormData();
//添加文件对象到表单
formData.append("uploadFile",app.uploadFile);
//配置表单的请求头（multipart/form-data 我不是很清楚，应该是传输二进制文件）
var config = {
headers: { 'Content-Type': 'multipart/form-data' }
};
//蒙版（上传之前加个蒙版，不会太突兀）
app.updwLoading = app.$loading({
lock:true,
text:"上传中...",
spinner:"el-icon-loading",
background:'#aaaaaa50'
});
app.$axios.post(app.uploadUrl, formData, config
).then(res => {
//附件上传成功后 保存到数据库
if(res.data.result){
//去保存到数据库（第二次异步请求）
app.saveData(res.data);
}else{
//(message提示)上传附件失败……
}
});
//关闭蒙版（延时1s）
setTimeout(()=>{
app.updwLoading.close();
},1000);
//上传失败或成功都清空列表，不展示（看你需求）
app.fileList = [];
}
- 保存到数据库异步请求
saveData(data){
//保存数据
var app = this;
//设置值（vue好像不能监听到对象的值的改变，所以用set设置）
app.$set(app.saveDataEntity,'name',data.name);
app.$set(app.saveDataEntity,'url',data.url);
axios.post('保存数据库地址',app.saveDataEntity,res => {
if(!res.data.result){
//(message提示)保存附件信息失败，请重试。
}else{
//(message提示)成功！
}
});
}
上传文件：后端
- 接收文件，并使用 io流 输出，返回对应信息
@RequestMapping("/upFile")
public ResultEntity uploadFile(@RequestParam("uploadFile") MultipartFile uploadFile){
//调用工具类（自己封装）
return FileUtil.updateFile(uploadFile);
}
- FileUtil 工具类 上传部分
public static ResultEntity updateFile(MultipartFile file){
ResultEntity entity = new ResultEntity();
//将文件输出并返回相对路径 upload()方法在下面
String url = upload(file);
//返回数据
if(Strings.isNullOrEmpty(url)){
entity.setResult(false);
return entity;
}else{
entity.setResult(true);
entity.setName(file.getOriginalFilename());
entity.setUrl(url);
return entity;
}
}
private static String upload(MultipartFile file){
String url = "";
FileOutputStream out = null;
InputStream in = null;
try {
//时间戳
String format = Long.toString(System.currentTimeMillis());
//文件名
String fileName = file.getOriginalFilename();
//后缀名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
//文件 相对路径输出
File f = new File("src/main/resources/"+"自定义文件夹"+"/"+format+suffixName);
//检测 文件夹和文件是否存在,不存在则创建
if (!f.getParentFile().exists()) {
//创建文件夹
f.getParentFile().mkdirs();
//创建文件
f.createNewFile();
}
//输出流 文件必须已经存在
out = new FileOutputStream(f);
//文件的输入流
in = file.getInputStream();
//边读边写
byte[] b = new byte[1024*1024];
int len = 0;
while((len = in.read(b)) != -1){
out.write(b);
}
//刷新流
out.flush();
//返回相对路径
url = "自定义文件夹" + "/" + format + suffixName;
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if(out != null){
out.close();
}
} catch (IOException e) {
e.printStackTrace();
}
try {
if(in != null){
in.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return url;
}
- 保存数据库（略）
