elementui 按钮 表单_前后端分离,文件上传下载(springBoot+vue+elementUI)
1.介绍
本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都是可以上传下载的,前端就是一个页面,后端就是一个controller页面,就可以解决
1.1前端样子
2.前端
2.1先分享一下前端的全部代码
<template> <div> <center> center> <div style="float: left;margin-left: 100px"> <el-button type="primary" v-on:click="tocustomQuery" >上一步el-button> div> <div style="float: right;margin-right: 100px"> <el-button type="primary" v-on:click="saveResource" >保存el-button> div> <br> <h1>基本信息设置h1> <br> <br> <center> <div style="margin-right: 170px"> <el-form ref="form" :model="form" label-width="120px" > <el-form-item label="报表名称中文:" style="width: 470px;"> <el-input v-model="form.reportName" >el-input> el-form-item> <el-form-item label="报表名称英文:" style="width: 470px;"> <el-input v-model="form.reportEnName">el-input> el-form-item> <el-form-item label="报表名称中英文:" style="width: 470px;"> <el-input v-model="form.reportChEnName">el-input> el-form-item> <el-form-item label="报表备注:" style="width: 470px;"> <el-input v-model="form.remarks">el-input> el-form-item> <el-form-item label="功能编号" style="width: 470px;"> <el-input v-model="form.code" >el-input> el-form-item> <el-form-item label="编辑模板:" style="width: 570px;"> <el-input placeholder="模板地址" style="width: 200px" disabled>el-input> <el-upload class="upload-demo" :action="uploadUrl" :before-upload="handleBeforeUpload" :on-error="handleUploadError" :before-remove="beforeRemove" multiple :limit="5" :on-exceed="handleExceed" :file-list="fileList"> <el-button size="small" type="primary">点击上传el-button> el-upload> <a href="http://localhost:8080/file/download?fileName=test.xls">下载附件a> el-form-item> <el-form-item label="模板备注:" style="width: 480px;"> 模板用于下载,打印EXCEL时使用。其中{ {CURRENT_USER} }表示当前用户名, { {TITLE} }表示表头,{ {DATA} }表示数据行,{ {FOOTER} }表示页脚区域。 导出的内容不可改动,页眉页脚区域可以自由编辑。 el-form-item> <el-form-item > <el-select v-model="form.isPublic" style="width: 350px;"> <el-option label="私有查询" value="2" >el-option> <el-option label="公共查询" value="1">el-option> el-select> el-form-item> <el-form-item > <el-checkbox label="是否打印" v-model="form.isPrinting" true-label="1" false-label="2">el-checkbox> <el-checkbox label="是否导出" v-model="form.isExport" true-label="1" false-label="2">el-checkbox> <el-form-item type="hidden" style="width: 470px;"> el-form-item> el-form-item> el-form> div> center> div>template><script>import axios from 'axios'import { uuid } from 'vue-uuid';export default { data() { return { form: { reportName:'', reportEnName:'', reportChEnName:'', remarks:'', code:'', isPublic:'1', isPrinting:"1", isExport:"1", datas:[{},{},{},{}], A0010011:'', A0010012:'', A0010013:'', A0010014:'', }, // uuid1:'', // cusList:{}, uploadUrl: 'file/upload', fileList: [], } }, created() { console.log("上个页面传来的是",sessionStorage) // this.handleUUIDv1() this.form.code = this.$uuid.v1() console.log("页面刷新后新产生的uuid是",this.form.code) }, watch:{ reportName: function (newVal,oldVal) {//新值和原值 console.log("name改变了 a:"+newVal+" b:"+oldVal) } }, methods: { //使用uuid // handleUUIDv1() { // this.uuid1 = this.$uuid.v1() // }, //点击多选按钮true和false变成1或者2 reset(form){ this.$refs['form'].resetFields(); }, //获取上个页面传来的数据 getcustomQuery() { let reportName=this.form.reportName sessionStorage.setItem("reportName",reportName) let reportEnName = this.form.reportEnName sessionStorage.setItem("reportEnName",reportEnName) let reportChEnName = this.form.reportChEnName sessionStorage.setItem("reportChEnName",reportChEnName) let remarks = this.form.remarks sessionStorage.setItem("remarks",remarks) let code = this.form.code sessionStorage.setItem("code",code) let isPublic = this.form.isPublic sessionStorage.setItem("isPublic",isPublic) let isPrinting = this.form.isPrinting sessionStorage.setItem("isPrinting",isPrinting) let isExport = this.form.isExport sessionStorage.setItem("isExport",isExport) console.log("上个页面传来的是",sessionStorage) }, // this.$router.push('/reportTools/cusMain'),点击保存发送链接 并跳转 tocustomQuery(){ this.$router.push('/reportTools/customQuery') }, saveResource(){ console.log("当前页面表单的数据",this.form) // sessionStorage.setItem("params",JSON.stringify(this.form)) console.log("sessionStorage中的数据",sessionStorage) this.getcustomQuery() this.$http.post("http://localhost:8080/reporttools/report-show/addReportShow",sessionStorage).then( resp=>{ console.log(resp) //this.$router.push('/reportTools/cusMain') }) }, handleExceed(files, fileList) { this.$message.warning(`当前限制选择 5 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); }, beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${ file.name }?`); }, handleUploadError(error, file) { console.log("文件上传出错:"+error) }, //测试上传文件(注意web的上下文) handleBeforeUpload(file){ console.log("开始上传,上传的文件为:"+file) let formData = new FormData(); formData.append("multipartFiles", file); axios({ method: 'post', url: 'file/upload', data: formData, headers: {'Content-Type': 'multipart/form-data' } }).then((res) => { console.log("文件上传返回:"+res) }).catch(error => { console.log("文件上传异常:"+error) }) }, }}script><style scoped>a { text-decoration: none;}style>
2.2分享一下前端template层的代码
2.2.1上传下载template全部代码
<el-upload class="upload-demo" :action="uploadUrl" :before-upload="handleBeforeUpload" :on-error="handleUploadError" :before-remove="beforeRemove" multiple :limit="5" :on-exceed="handleExceed" :file-list="fileList"> <el-button size="small" type="primary">点击上传el-button> el-upload> <a href="http://localhost:8080/file/download?fileName=test.xls">下载附件a>
2.2.2 上传代码
<el-upload class="upload-demo" :action="uploadUrl" :before-upload="handleBeforeUpload" :on-error="handleUploadError" :before-remove="beforeRemove" multiple :limit="5" :on-exceed="handleExceed" :file-list="fileList"> <el-button size="small" type="primary">点击上传el-button> el-upload>
2.2.3下载代码
下载代码就是一个a标签
<a href="http://localhost:8080/file/download?fileName=test.xls">下载附件a>
2.3分享一下前端script代码
<script>import axios from 'axios'import { uuid } from 'vue-uuid';export default { data() { return { form: { reportName:'', reportEnName:'', reportChEnName:'', remarks:'', code:'', isPublic:'1', isPrinting:"1", isExport:"1", datas:[{},{},{},{}], A0010011:'', A0010012:'', A0010013:'', A0010014:'', }, // uuid1:'', // cusList:{}, uploadUrl: 'file/upload', fileList: [], } }, created() { console.log("上个页面传来的是",sessionStorage) // this.handleUUIDv1() this.form.code = this.$uuid.v1() console.log("页面刷新后新产生的uuid是",this.form.code) }, watch:{ reportName: function (newVal,oldVal) {//新值和原值 console.log("name改变了 a:"+newVal+" b:"+oldVal) } }, methods: { //使用uuid // handleUUIDv1() { // this.uuid1 = this.$uuid.v1() // }, //点击多选按钮true和false变成1或者2 reset(form){ this.$refs['form'].resetFields(); }, //获取上个页面传来的数据 getcustomQuery() { let reportName=this.form.reportName sessionStorage.setItem("reportName",reportName) let reportEnName = this.form.reportEnName sessionStorage.setItem("reportEnName",reportEnName) let reportChEnName = this.form.reportChEnName sessionStorage.setItem("reportChEnName",reportChEnName) let remarks = this.form.remarks sessionStorage.setItem("remarks",remarks) let code = this.form.code sessionStorage.setItem("code",code) let isPublic = this.form.isPublic sessionStorage.setItem("isPublic",isPublic) let isPrinting = this.form.isPrinting sessionStorage.setItem("isPrinting",isPrinting) let isExport = this.form.isExport sessionStorage.setItem("isExport",isExport) console.log("上个页面传来的是",sessionStorage) }, // this.$router.push('/reportTools/cusMain'),点击保存发送链接 并跳转 tocustomQuery(){ this.$router.push('/reportTools/customQuery') }, saveResource(){ console.log("当前页面表单的数据",this.form) // sessionStorage.setItem("params",JSON.stringify(this.form)) console.log("sessionStorage中的数据",sessionStorage) this.getcustomQuery() this.$http.post("http://localhost:8080/reporttools/report-show/addReportShow",sessionStorage).then( resp=>{ console.log(resp) //this.$router.push('/reportTools/cusMain') }) }, handleExceed(files, fileList) { this.$message.warning(`当前限制选择 5 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); }, beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${ file.name }?`); }, handleUploadError(error, file) { console.log("文件上传出错:"+error) }, //测试上传文件(注意web的上下文) handleBeforeUpload(file){ console.log("开始上传,上传的文件为:"+file) let formData = new FormData(); formData.append("multipartFiles", file); axios({ method: 'post', url: 'http://localhost:8080/file/upload', data: formData, headers: {'Content-Type': 'multipart/form-data' } }).then((res) => { console.log("文件上传返回:"+res) }).catch(error => { console.log("文件上传异常:"+error) }) }, }}script><style scoped>a { text-decoration: none;}style>
2.3.1上传script全部代码
主要是对前端做一些限制
handleExceed(files, fileList) { this.$message.warning(`当前限制选择 5 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);},beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${ file.name }?`);},handleUploadError(error, file) { console.log("文件上传出错:"+error)},//测试上传文件(注意web的上下文)handleBeforeUpload(file){ console.log("开始上传,上传的文件为:"+file) let formData = new FormData(); formData.append("multipartFiles", file); axios({ method: 'post', url: 'http://localhost:8080/file/upload', data: formData, headers: {'Content-Type': 'multipart/form-data' } }).then((res) => { console.log("文件上传返回:"+res) }).catch(error => { console.log("文件上传异常:"+error) })},
2.3.2在data的return里添加
uploadUrl: 'file/upload', fileList: [],
也就是在data层的 return里写
data(){ return { uploadUrl: 'http://localhost:8080/file/upload', fileList: [],}}
就这样前端就完成了
后端主要就是一个controller层
2.3.3Axios的引入
很重要的一个,因为我的写法不一样可能有不兼容的地方,有的vue不能这么写,所以需要引入一下
直接引入就可以,在script里面,
不会就看我上面分享的
import axios from 'axios'
3.后端
3.1后端全部代码
package com.ciic.reporter.updownload.controller;import org.apache.tomcat.util.http.fileupload.IOUtils;import org.springframework.web.bind.annotation.*;import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.*;import java.nio.file.Files;import java.nio.file.Path;import java.nio.file.Paths;@RestController@RequestMapping("file")public class CiicUpDownloadController { private final static String rootPath = "E:/attachment/"; @RequestMapping("/upload") public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){ File fileDir = new File(rootPath); if (!fileDir.exists() && !fileDir.isDirectory()) { fileDir.mkdirs(); } try { if (multipartFiles != null && multipartFiles.length > 0) { for(int i = 0;i<multipartFiles.length;i++){ try { //以原来的名称命名,覆盖掉旧的,这里也可以使用UUID之类的方式命名,这里就没有处理了 String storagePath = rootPath+multipartFiles[i].getOriginalFilename(); System.out.println("上传的文件:" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename() +",保存的路径为:" + storagePath); // 3种方法:第1种// Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true); // 第2种 Path path = Paths.get(storagePath); Files.write(path,multipartFiles[i].getBytes()); // 第3种 // multipartFiles[i].transferTo(new File(storagePath)); } catch (IOException e) { e.printStackTrace(); } } } } catch (Exception e) { e.printStackTrace(); } //前端可以通过状态码,判断文件是否上传成功 return "文件上传成功"; } /** * * @param fileName 文件名 * @param response * @return */ @RequestMapping("/download") public Object downloadFile(@RequestParam String fileName, HttpServletResponse response){ OutputStream os = null; InputStream is= null; try { // 取得输出流 os = response.getOutputStream(); // 清空输出流 response.reset(); response.setContentType("application/x-download;charset=utf-8"); //Content-Disposition中指定的类型是文件的扩展名,并且弹出的下载对话框中的文件类型图片是按照文件的扩展名显示的,点保存后,文件以filename的值命名, // 保存类型以Content中设置的为准。注意:在设置Content-Disposition头字段之前,一定要设置Content-Type头字段。 //把文件名按UTF-8取出,并按ISO8859-1编码,保证弹出窗口中的文件名中文不乱码,中文不要太多,最多支持17个中文,因为header有150个字节限制。 response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"),"ISO8859-1")); //读取流 File f = new File(rootPath+fileName); is = new FileInputStream(f); if (is == null) { System.out.println("下载附件失败,请检查文件“" + fileName + "”是否存在"); return "下载附件失败,请检查文件“" + fileName + "”是否存在"; } //复制 IOUtils.copy(is, response.getOutputStream()); response.getOutputStream().flush(); } catch (IOException e) { return "下载附件失败,error:"+e.getMessage(); } //文件的关闭放在finally中 finally { try { if (is != null) { is.close(); } } catch (IOException e) { e.printStackTrace(); } try { if (os != null) { os.close(); } } catch (IOException e) { e.printStackTrace(); } } //其实,这个返回什么都不重要 return "下载成功"; }}
3.2后端定义一个class类
@RestController@RequestMapping("file")public class CiicUpDownloadController {}
3.3后端定义一个上传的路径
private final static String rootPath = "E:/attachment/";
3.3.1加上上面定义的类也就是
@RestController@RequestMapping("file")public class CiicUpDownloadController { private final static String rootPath = "E:/attachment/";}
3.4后端定义上传方法
@RequestMapping("/upload") public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){ File fileDir = new File(rootPath); if (!fileDir.exists() && !fileDir.isDirectory()) { fileDir.mkdirs(); } try { if (multipartFiles != null && multipartFiles.length > 0) { for(int i = 0;i<multipartFiles.length;i++){ try { //以原来的名称命名,覆盖掉旧的,这里也可以使用UUID之类的方式命名,这里就没有处理了 String storagePath = rootPath+multipartFiles[i].getOriginalFilename(); System.out.println("上传的文件:" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename() +",保存的路径为:" + storagePath); // 3种方法:第1种// Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true); // 第2种 Path path = Paths.get(storagePath); Files.write(path,multipartFiles[i].getBytes()); // 第3种 // multipartFiles[i].transferTo(new File(storagePath)); } catch (IOException e) { e.printStackTrace(); } } } } catch (Exception e) { e.printStackTrace(); } //前端可以通过状态码,判断文件是否上传成功 return "文件上传成功"; }
3.4.3加上之前的路径和类就是
@RestController@RequestMapping("file")public class CiicUpDownloadController { private final static String rootPath = "E:/attachment/"; @RequestMapping("/upload") public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){ File fileDir = new File(rootPath); if (!fileDir.exists() && !fileDir.isDirectory()) { fileDir.mkdirs(); } try { if (multipartFiles != null && multipartFiles.length > 0) { for(int i = 0;i<multipartFiles.length;i++){ try { //以原来的名称命名,覆盖掉旧的,这里也可以使用UUID之类的方式命名,这里就没有处理了 String storagePath = rootPath+multipartFiles[i].getOriginalFilename(); System.out.println("上传的文件:" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename() +",保存的路径为:" + storagePath); // 3种方法:第1种// Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true); // 第2种 Path path = Paths.get(storagePath); Files.write(path,multipartFiles[i].getBytes()); // 第3种 // multipartFiles[i].transferTo(new File(storagePath)); } catch (IOException e) { e.printStackTrace(); } } } } catch (Exception e) { e.printStackTrace(); } //前端可以通过状态码,判断文件是否上传成功 return "文件上传成功"; }}
3.5后端定义下载方法
/** * * @param fileName 文件名 * @param response * @return */ @RequestMapping("/download") public Object downloadFile(@RequestParam String fileName, HttpServletResponse response){ OutputStream os = null; InputStream is= null; try { // 取得输出流 os = response.getOutputStream(); // 清空输出流 response.reset(); response.setContentType("application/x-download;charset=utf-8"); //Content-Disposition中指定的类型是文件的扩展名,并且弹出的下载对话框中的文件类型图片是按照文件的扩展名显示的,点保存后,文件以filename的值命名, // 保存类型以Content中设置的为准。注意:在设置Content-Disposition头字段之前,一定要设置Content-Type头字段。 //把文件名按UTF-8取出,并按ISO8859-1编码,保证弹出窗口中的文件名中文不乱码,中文不要太多,最多支持17个中文,因为header有150个字节限制。 response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"),"ISO8859-1")); //读取流 File f = new File(rootPath+fileName); is = new FileInputStream(f); if (is == null) { System.out.println("下载附件失败,请检查文件“" + fileName + "”是否存在"); return "下载附件失败,请检查文件“" + fileName + "”是否存在"; } //复制 IOUtils.copy(is, response.getOutputStream()); response.getOutputStream().flush(); } catch (IOException e) { return "下载附件失败,error:"+e.getMessage(); } //文件的关闭放在finally中 finally { try { if (is != null) { is.close(); } } catch (IOException e) { e.printStackTrace(); } try { if (os != null) { os.close(); } } catch (IOException e) { e.printStackTrace(); } } //其实,这个返回什么都不重要 return "下载成功"; }
3.5.1加上之前定义的路径类和上传方法就是
package com.ciic.reporter.updownload.controller;import org.apache.tomcat.util.http.fileupload.IOUtils;import org.springframework.web.bind.annotation.*;import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.*;import java.nio.file.Files;import java.nio.file.Path;import java.nio.file.Paths;@RestController@RequestMapping("file")public class CiicUpDownloadController { private final static String rootPath = "E:/attachment/"; @RequestMapping("/upload") public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){ File fileDir = new File(rootPath); if (!fileDir.exists() && !fileDir.isDirectory()) { fileDir.mkdirs(); } try { if (multipartFiles != null && multipartFiles.length > 0) { for(int i = 0;i<multipartFiles.length;i++){ try { //以原来的名称命名,覆盖掉旧的,这里也可以使用UUID之类的方式命名,这里就没有处理了 String storagePath = rootPath+multipartFiles[i].getOriginalFilename(); System.out.println("上传的文件:" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename() +",保存的路径为:" + storagePath); // 3种方法:第1种// Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true); // 第2种 Path path = Paths.get(storagePath); Files.write(path,multipartFiles[i].getBytes()); // 第3种 // multipartFiles[i].transferTo(new File(storagePath)); } catch (IOException e) { e.printStackTrace(); } } } } catch (Exception e) { e.printStackTrace(); } //前端可以通过状态码,判断文件是否上传成功 return "文件上传成功"; } /** * * @param fileName 文件名 * @param response * @return */ @RequestMapping("/download") public Object downloadFile(@RequestParam String fileName, HttpServletResponse response){ OutputStream os = null; InputStream is= null; try { // 取得输出流 os = response.getOutputStream(); // 清空输出流 response.reset(); response.setContentType("application/x-download;charset=utf-8"); //Content-Disposition中指定的类型是文件的扩展名,并且弹出的下载对话框中的文件类型图片是按照文件的扩展名显示的,点保存后,文件以filename的值命名, // 保存类型以Content中设置的为准。注意:在设置Content-Disposition头字段之前,一定要设置Content-Type头字段。 //把文件名按UTF-8取出,并按ISO8859-1编码,保证弹出窗口中的文件名中文不乱码,中文不要太多,最多支持17个中文,因为header有150个字节限制。 response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"),"ISO8859-1")); //读取流 File f = new File(rootPath+fileName); is = new FileInputStream(f); if (is == null) { System.out.println("下载附件失败,请检查文件“" + fileName + "”是否存在"); return "下载附件失败,请检查文件“" + fileName + "”是否存在"; } //复制 IOUtils.copy(is, response.getOutputStream()); response.getOutputStream().flush(); } catch (IOException e) { return "下载附件失败,error:"+e.getMessage(); } //文件的关闭放在finally中 finally { try { if (is != null) { is.close(); } } catch (IOException e) { e.printStackTrace(); } try { if (os != null) { os.close(); } } catch (IOException e) { e.printStackTrace(); } } //其实,这个返回什么都不重要 return "下载成功"; }}
谢谢大家的阅读,原创不易,喜欢就随手点个赞?,这将是我最强的写作动力。如果觉得文章对你有点帮助,还挺有趣,就关注一下我的公众号「仵航」
elementui 按钮 表单_前后端分离,文件上传下载(springBoot+vue+elementUI)相关推荐
- ubantu20.04服务器使用docker以及docker-compose编排部署前后端分离个人博客项目(springboot+vue+mysql+redis)
ubantu20.04使用docker部署前后端分离个人博客项目(springboot+vue+mysql+redis) 前言 本博客是基于springboot+vue+jwt+redis+mysql ...
- elementui 按钮 表单_仿ElementUI实现一个Form表单的实现代码
使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 一. 目标 仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Inp ...
- 前后端分离实现在线音乐网站-springboot+vue
项目编号:BS-PT-049 运行环境: 开发工具:IDEA /ECLIPSE 数据库:MYSQL5.7 JAVA: JDK1.8 依赖管理:MAVEN 后台开发技术:Springboot+SSM ...
- 商城+前后端分离+课程设计+大作业 Springboot+vue+swagger+好看的安卓界面
这里写目录标题 一.绪论 二.需求分析 2.2商户与顾客间通讯服务 2.3 完整的购物流程 2.4 后台管理 2.5 交流社区 2.6 附加功能 2.7 部署在云服务器上 三.总体设计 3.1系统结构 ...
- Tornado+Layui(九)Tornado+Layui 前后端分离 头像上传
目的:添加人员信息和头像同时上传 过程: 1.Layui头像界面 <!DOCTYPE html> <html> <head><meta charset=&qu ...
- 【一文学会文件上传】SpringBoot+form表单实现文件上传
唠嗑部分 平时我们在项目过程中,往往会遇到这种情况,比如:我的用户应该有一个头像,那就涉及到文件上传,那么文件应该如何存储呢? 这就会有很多方式 1.最简单的就是存在服务器上,这就要考虑到服务器的磁盘 ...
- 利用mysql实现上传和下载_文件上传表单 上传文件的细节 文件上传下载和数据库结合...
1 文件上传表单 1)上传文件的本质是文本复制的过程 2)技术层面,在Java中一定会用到IO操作,主要以二进制方式读写 3)传统方式下,对于上传文件字段不同的浏览器有着不同的解析方式,例如: IE6 ...
- 文件上传表单 上传文件的细节 文件上传下载和数据库结合
1 文件上传表单 1)上传文件的本质是文本复制的过程 2)技术层面,在Java中一定会用到IO操作,主要以二进制方式读写 3)传统方式下,对于上传文件字段不同的浏览器有着不同的解析方 ...
- 前后端上传图片(上传发票并获取发票信息)
前后端上传图片(上传发票并获取发票信息) React+Antd上传图片 后端SpringBoot接收图片 SpringBoot后端解析发票信息 React+Antd上传图片 上传图片upload组件 ...
最新文章
- [LeetCode]题解(python):013-Roman to Integer
- Python基础教程:七种运算符
- pyspark reduce代码示例
- 重学java基础第二十三课:java基础 注释
- 修改、读取txt文档
- centos7 /etc/profile 文件模板
- LaTeX技巧205:使用split输入多行公式技巧
- html纵向固定导航菜单代码,CSS3单页面垂直固定导航
- artcam 9.0英文版本下载_Win10安装paddlepaddle-gpu的python版本
- BAT监视360进程.txt
- secoclient免积分下载
- 微信抽奖系统源码 v3.0
- 怎么根据错误弹窗 判断进程_苹果手机弹窗bug是什么情况?苹果手机为什么会出现弹窗bug要怎么解决?...
- slk文件转换器安卓版_手机MP3提取转换器下载|MP3提取转换器app安卓版V1.3.7 下载_当游网...
- 单片机、嵌入式ARM学习网站推荐(多年的积累)
- 基于MATLAB机器视觉技术的水果分级研究进展
- 谷歌浏览器无法使用翻译功能的解决方案,谷歌浏览器无法翻译怎么办?谷歌浏览器右键翻译失效了?
- 计算机应用基础实践考核考什么,《计算机应用基础》实践性环节考核方案
- 关于iOS推送中点击通知的几点备忘
- 双绞线绞合消除电磁干扰原理