Vue-Element UI 文件上传与下载
生活随笔
收集整理的這篇文章主要介紹了
Vue-Element UI 文件上传与下载
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
項(xiàng)目結(jié)構(gòu)
后端
前端
效果演示
上傳文件
下載文件
Code
后端代碼
- 跨域
/**
* 跨域配置
* @author Louis
* @date Jan 12, 2019
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 允許跨域訪問的路徑
.allowedOrigins("*") // 允許跨域訪問的源
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允許請(qǐng)求方法
.maxAge(168000) // 預(yù)檢間隔時(shí)間
.allowedHeaders("*") // 允許頭部設(shè)置
.allowCredentials(true); // 是否發(fā)送cookie
}
}
- 上傳文件
/**
* todo 文件上傳
* @param response
* @param file
*/
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
public R uploadFile(HttpServletResponse response, MultipartFile file) {
response.setContentType("text/html;charset=UTF-8");
// 設(shè)置大小
long maxSize = (long) (1000 * 1024 * 1024);
Map<String, Object> result = new HashMap<String, Object>();
String fileName = file.getOriginalFilename();
if (file.getSize() > maxSize) {
result.put("result", "fail");
result.put("msg", "不能查過100MB");
logger.warn("文件大小超過100MB");
} else {
try {
Date date = new Date();
String relativeDir = getRelativeDir(date);
File fileDir = new File(filePath + relativeDir);
if (!fileDir.exists()) {
fileDir.mkdirs();
}
//新的文件名
String newName = CommonUtil.format(date, "HHmmssSSS") +
Math.round(Math.random() * 8999 + 1000) +
fileName.substring(fileName.lastIndexOf("."));
logger.info("文件存儲(chǔ)路徑："+filePath + relativeDir + newName);
file.transferTo(new File(filePath + relativeDir + newName));
// 以下可以進(jìn)行業(yè)務(wù)邏輯操作 插入數(shù)據(jù)庫等操作
this.sysFileService.save(new SysFile(fileName,relativeDir + newName,file.getSize(),file.getContentType()));
result.put("result", "success");
result.put("data", relativeDir+newName);
result.put("msg", "上傳成功");
logger.info("上傳成功");
} catch (Exception e) {
result.put("result", "fail");
result.put("msg", "上傳失敗");
logger.error(e.toString());
}
}
return success(result);
}
- 下載文件
/**
* todo 下載文件
* @param response
* @param fileId
*/
@GetMapping("downLoadFile")
public void downLoadFile(HttpServletResponse response, Integer fileId, HttpServletRequest request) {
response.setHeader("Content-Type", "application/octet-stream");
SysFile sysFile = this.sysFileService.getById(fileId);
OutputStream out = null;
try {
File file = new File(filePath + sysFile.getAbsolutepath());
response.setHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode(sysFile.getFileName(), "UTF-8"));
FileInputStream fin = new FileInputStream(file);
byte[] data = new byte[(int) file.length()];
fin.read(data);
fin.close();
out = response.getOutputStream();
out.write(data);
} catch (Exception e) {
e.printStackTrace();
}finally {
if (out != null) {
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
前端代碼
- 頁面代碼
<template>
<div>
<el-row>
<el-col :span="24">
<el-card class="box-card">
<el-row style="float: left;margin-top: 10px;margin-bottom: 10px ">
<el-col :span="24">
<el-button type="primary" @click="dialogVisible=true">上傳</el-button>
</el-col>
</el-row>
<el-table
stripe
highlight-current-row
border
:data="fileDataList"
style="width: 100%">
<el-table-column
prop="fileName"
label="文件名"
align="center"
width="200">
</el-table-column>
<el-table-column
prop="fileSize"
label="文件大小"
align="center"
width="180">
</el-table-column>
<el-table-column
prop="fileTime"
align="center"
label="上傳時(shí)間">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-button @click="downLoad(scope.row)" type="text">下載</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
<el-dialog
title="文件上傳"
:visible.sync="dialogVisible"
center
width="30%">
<div style="text-align: center">
<el-upload
action
class="upload-demo"
drag
:on-change="fileChange"
:auto-upload="false"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
<div class="el-upload__tip" slot="tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="httpRequest">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'file',
data() {
return {
form: {
fileName: '',
current: 1,
size: 10
},
fileDataList: [],
dialogVisible: false,
file: ''
}
},
methods: {
// 下載文件
downLoad(row) {
this.$http.get(
'/sysFile/downLoadFile',
{params: {fileId: row.fileId}},
{responseType: "blob"}
).then((res) => {
let url = window.URL.createObjectURL(new Blob([res.data]));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", row.fileName); //指定下載后的文件名，防跳轉(zhuǎn)
document.body.appendChild(link);
link.click();
// 釋放內(nèi)存
window.URL.revokeObjectURL(link.href)
}).catch(function (error) {
console.log(error);
});
},
// 加載文件
async getFileList() {
this.$http.get('/sysFile/selectAll', {params: this.query}).then((res) => {
if (res.data.code == 0) {
this.fileDataList = res.data.data.records;
// this.total = res.data.data.total;
}
}).catch(function (error) {
console.log(error);
});
},
// 上傳文件
httpRequest() {
if (this.file == null) {
this.$message.warning('請(qǐng)選擇需要上傳的文件');
return false;
}
let params = new FormData();
params.append('file', this.file);
let config = {
headers: {'Content-Type': 'multipart/form-data'}
};
this.$http.post('/sysFile/uploadFile', params, config).then((res) => {
if (res.data.code == 0 || res.data.data.result == 'success') {
this.$message.success('文件上傳成功');
this.dialogVisible = false;
this.file = '';
this.getFileList();
}
}).catch(function (error) {
console.log(error);
});
},
fileChange(file, fileList) {
this.file = file.raw;
},
},
created() {
this.getFileList();
}
}
</script>
<style scoped>
</style>
注：
前端下載，不建議使用超鏈接方式
比如這種的，不信可以試試，你就知道為什么了！
function downloadExcel() {
window.location.href = "/tUserHyRights/downloadUsersUrl";
}
個(gè)人覺得使用：對(duì)后端發(fā)的post請(qǐng)求，使用blob格式
總結(jié)
以上是生活随笔為你收集整理的Vue-Element UI 文件上传与下载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： robocopy超快小文件复制工具
- 下一篇： 部署PDA程序的时候存储不足的解决办法