vue+springboot前后端分离上传单个文件
vue上传单个文件
第一步:前端页面
//点击按钮,出现弹框
<el-button type="primary" round @click="visible=true">添加文件</el-button>
//弹框
<el-dialog :visible.sync="visible">
<el-form>
<el-form-item label="文件" prop="file">
<el-input v-model="fileName" :disabled="true"></el-input><br>
<el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :before-upload="beforeUpload">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传excel文件,且不超过5MB</div>
</el-upload>
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="submitUpload()">确定</el-button>
</el-form-item>
</el-form>
</el-dialog>
第二部:js代码:
//要在data中定义fileName和visible,这里不贴出data,只给出两个方法
//检查文件格式大小等
beforeUpload(file){
debugger
console.log(file,'文件');
this.files = file;
const extension = file.name.split('.')[1] === 'xls'
const extension2 = file.name.split('.')[1] === 'xlsx'
const isLt2M = file.size / 1024 / 1024 < 5
if (!extension && !extension2) {
this.$message.warning('上传模板只能是 xls、xlsx格式!')
return
}
if (!isLt2M) {
this.$message.warning('上传模板大小不能超过 5MB!')
return
}
this.fileName = file.name;
return false // 返回false不会自动上传
},
//上传文件方法
//注意,url中的api是我设置的代理,如:
//proxyTable: {
//'/api': {
// target: 'http://192.168.100.223:8090',
// changeOrigin: true,
// pathRewrite: {
// '^/api': ''
// }
// }
// },
submitUpload() {
debugger
console.log('上传'+this.files.name)
if(this.fileName == ""){
this.$message.warning('请选择要上传的文件!')
return false
}
let fileFormData = new FormData();
fileFormData.append('file', this.files, this.fileName);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名
let requestConfig = {
headers: {
'Content-Type': 'multipart/form-data'
},
}
this.$http.post(`/api/paas/upload`, fileFormData, requestConfig).then((res) => {
debugger
if (res && res.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
}
})
} else {
this.$message.error(res.msg)
}
})
}
第三步: 后台
@RequestMapping(value = "/upload")
public Result upload(@RequestParam("file") MultipartFile file) {
Result result = new Result();
result.setCode(200);
if (file != null) {
try {
String fileRealName = file.getOriginalFilename();// 获得原始文件名;
String filePath = "F:\\F";
File savedFile = new File(filePath);
if (!savedFile.exists()) {
savedFile.mkdirs();
}
savedFile = new File(filePath, fileRealName);
boolean isCreateSuccess = savedFile.createNewFile();
if (isCreateSuccess) { // 转存文件
file.transferTo(savedFile); // 第一种
//FileUtils.copyInputStreamToFile(file.getInputStream(),savedFile); // 第二种
}
} catch (Exception e) {
e.printStackTrace();
}
} else {
result.setCode(500);
result.setMessage("文件为空!");
}
// 上传文件 相关逻辑
return result;
}
结语
以上方法可以实现单个文件的上传,文件夹的上传,下篇博文更新。
如果有帮助到你,我很开心。