post请求方式：
1、手动上传并自带参数
<el-form-item label="上传"><el-uploadref="upload"class="upload-demo":auto-upload="false" //是否在选取文件后立即进行上传:http-request="import" //覆盖默认的上传行为，可以自定义上传的实现:data="data" //需传递的数据action="no"><el-button size="small" type="primary">选取文件</el-button></el-upload>
</el-form-item>
<el-form-item label=""><el-button type="primary" @click="submitUpload">导入</el-button><el-button type="primary" @click="cancel">取消</el-button>
</el-form-item>submitUpload() { this.$refs.upload.submit() // 手动上传文件列表},import(val) {const fd = new FormData()fd.append('data', JSON.stringify(val.data))fd.append('file', val.file)import(fd).then(res => { //向后请求console.log('导入成功')})}
后端代码如下
@PostMapping("import")
public void import(@RequestParam("file") MultipartFile file, @RequestParam("data") String json) {try {Entity entity= JSON.parseObject(json, Entity .class);//操作文件} catch (Exception e) {e.printStackTrace();}}
2、自动上传
<el-form ref="form" :model="form" :rules="rules" size="small"><el-upload:action="uploadApi":headers="headers":on-success="handleSuccess":on-error="handleError"class="upload-demo"drag><i class="el-icon-upload" /><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload>
</el-form>export default {data() {return {uploadApi: process.env.VUE_APP_BASE_API+ '/upload'}},
methods: {cancel() {this.resetForm()},handleSuccess(response, file, fileList) {this.cancel()},// 监听上传失败handleError(e, file, fileList) {const msg = JSON.parse(e.message)this.$notify({title: msg.message,type: 'error',duration: 2500})}}
}
后端代码如下
@PostMapping(value = "/upload")
public ResponseEntity<Object> upload(@RequestBody MultipartFile file, HttpServletRequest request)throws Exception{//解析操作文件
}
3、导出
export default {name: 'Cadata',inject: ['reload'],data() {return {},}},methods: {export() {data.exportData(data).then(res => {if (res != null) {this.downloadFile(res, this.caname, '.p12')// this.reload();}}).catch(() => {this.loading = false})},downloadFile(obj, name, suffix) {const url = window.URL.createObjectURL(new Blob([obj], {type: 'application/x-pkcs12'}))const link = document.createElement('a')link.style.display = 'none'link.href = urlconst fileName = name + suffixlink.setAttribute('download', fileName)document.body.appendChild(link)link.click()document.body.removeChild(link)}}
}js:export function exportData(data) {return request({url: 'api/exportData',method: 'post',data: data,responseType: 'blob',headers: {'Content-Type': 'application/x-pkcs12' // 请求的数据类型为form data格式}})
后台代码
@PostMapping("exportData")public void exportData(@RequestBody Entity entity, HttpServletResponse res, HttpServletRequest req) {try {byte[] bytes ; //获取要导出数据String encoding = req.getCharacterEncoding();if (StringUtils.isEmpty(encoding)) {encoding = "UTF-8";}req.setCharacterEncoding(encoding);res.setContentType("application/octet-stream");res.setHeader("Content-disposition", "attachment; filename=\"" + StringTools.stripFilename(caname + ".p12") + "\"");log.info("======导出结束======");} catch (Exception e) {log.error("error：" + e);} finally {if (inputStream != null) {try {inputStream.close();
// if (deleteOnExit) {
// file.deleteOnExit();
// }} catch (IOException e) {e.printStackTrace();}}}}
get请求方式
1、导出
down(data) {cafunctions.download(data.caid).then(res => { this.downPemFile(res, name, 'pem') //和导出方法一样})}js：export function download(caid) {return request({url: 'api/certificatedata/downloadJks?caid=' + caid ,method: 'get',responseType: 'blob'})
}
后台代码如下
/*** 导出excel*/@GetMapping(value = "/download")public void downloadExcel(int caid, HttpServletResponse response) throws IOException {String tempPath = System.getProperty("java.io.tmpdir") + IdUtil.fastSimpleUUID() + ".xlsx";File file = new File(tempPath);BigExcelWriter writer = ExcelUtil.getBigWriter(file);// 一次性写出内容，使用默认样式，强制输出标题List<Map<String, Object>> list=null; //获取要导出的数据writer.write(list, true);//response为HttpServletResponse对象response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");//test.xls是弹出下载对话框的文件名，不能为中文，中文请自行编码response.setHeader("Content-Disposition", "attachment;filename=file.xlsx");ServletOutputStream out = response.getOutputStream();// 终止后删除临时文件file.deleteOnExit();writer.flush(out, true);//此处记得关闭输出Servlet流IoUtil.close(out);}