如何通过ajax实现文件上传(Vue实现附件上传的具体代码介绍)
如何通过ajax实现文件上传
大噶好，今天我们先简单的来了解一个非常实用的功能，通过ajax上传文件。
技能：vue + axios + servlet
视图
<div id=\"app\" >
<input type=\"file\" @change=\"uploadPimage\" name=\"upload\" />
</div>
vue.js
<script type=\"application/javascript\" src=\"${ pageContext.request.contextPath }/js/vue.js\"></script>
<script type=\"application/javascript\" src=\"${ pageContext.request.contextPath }/js/axios.min.js\"></script>
<script type=\"application/javascript\" >
var vue = new Vue({
el: \"#app\",
data:{
pimage:\"\"
}
},
methods:{
uploadPimage:function (event) {
//通过ajax 上传文件
var formData = new FormData();
formData.append(\"pimage\",event.target.files[0]);
axios({
url:\"${ pageContext.request.contextPath }/AdminProductServlet?method=uploadPimage\",
method: \'post\',
headers:{
\'Content-Type\': \'multipart/form-data\'
},
data:formData
}).then(function (resp) {
//将服务器的图片地址 赋给 product.pimage
vue.pimage = resp.data;
})
}
}
})
</script>
核心的知识就是通过 FormData对象模拟一个form表单数据，我们知道表单提交必须设置表单属性enctype=\"multipart/form-data\"，并且提交方式为post。所以我们在通过axios提交数据时，需要设置请求头\'Content-Type\': \'multipart/form-data\'。
Servlet代码
public String uploadPimage(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
Part uploadPart = request.getPart(\"pimage\");
//获取文件名(来自于请求头 Content-Disposition: form-data; name=\"upload\"; filename=\"big.jpg\")
String contentDisposition = uploadPart.getHeader(\"Content-Disposition\");
int beginIndex = contentDisposition.indexOf(\"filename=\\\"\") + 10;
String fileName = contentDisposition.substring(beginIndex).replaceAll(\"\\\"\", \"\");
if (!fileName.isEmpty()) {
fileName = \"products/1/\" + UuidUtils.getUUID() + fileName;
String filePath = request.getServletContext().getRealPath(\"/\") + fileName;
//获取字节流
InputStream inputStream = uploadPart.getInputStream();
OutputStream outputStream = new FileOutputStream(filePath);
//保存文件
IOUtils.copy(inputStream, outputStream);
}
//向前端响应 文件名
return fileName;
}
好，搞定。
Vue实现附件上传的具体代码介绍
前言
前端 UI 是用的是 element-ui 的上传功能
本文主要记录下代码，方便下次复制粘贴
前端部分
HTML
limit：限制文件个数 1 个
on-remove：移除附件时的钩子函数，主要就 console 输出下
on-error：用于处理上传异常后的处理，本人这主要用来关闭弹窗和全屏等待
file-list：绑定附件
auto-upload： 禁止自动上传，true的话选了文件就自动上传
http-request：自定义上传文件请求方法，默认方法会与 mock 产生 XmlRequest 重新生成导致找不到文件问题，我注释了 mock 还是那样，没具体研究
action：原上传文件的路径，由于使用了自定义上传文件请求，即http-request，因此这个字段随便写就好，不写不行好像
| <el-upload
ref=\"upload\" :limit=\"1\" :on-remove=\"handleRemove\" :on-error=\"onError\" :file-list=\"fileList\" :auto-upload=\"false\" :http-request=\"uploadFile\" action=\"https://jsonplaceholder.typicode.com/posts/\" class=\"upload-demo\"> <el-button slot=\"trigger\" size=\"small\" type=\"primary\">选取文件</el-button> <!-- <el-button style=\"margin-left: 10px;\" size=\"small\" type=\"success\" @click=\"submitUpload\">上传到服务器</el-button> --> <div slot=\"tip\" class=\"el-upload__tip\">支持上传 {{ strRebuild(fileType) }} 格式，且不超过 {{ fileSize }}M</div> </el-upload> |
JS
| import { strRebuild, lastSubstring } from \'@/utils/strUtil\'
import { message } from \'@/utils/message\' export default { data() { return { // 附件列表 fileList: [], // 允许的文件类型 fileType: [\'xls\', \'xlsx\', \'pdf\', \'doc\', \'docx\', \'txt\', \'jpg\', \'png\', \'jpeg\'], // 运行上传文件大小，单位 M fileSize: 10, } }, methods: { // 清空表单 clear() { // 清空附件 this.$refs.upload.clearFiles() }, // 附件检查 // 检查附件是否属于可上传类型 // 检查附件是否超过限制大小 checkFile() { var flag = true var tip = \'\' var files = this.$refs.upload.uploadFiles files.forEach(item => { // 文件过大 if (item.size > this.fileSize * 1024 * 1024) { flag = false tip = \' 文件超过\' + this.fileSize + \'M\' } // 文件类型不属于可上传的类型 if (!this.fileType.includes(lastSubstring(item.name, \'.\'))) { flag = false tip = \' 文件类型不可上传\' } }) if (!flag) { message(\'error\', tip) } return flag }, // 提交附件 submitUpload() { if (this.checkFile()) { console.log(\'上传附件...\') this.$refs.upload.submit() } else { console.log(\'取消上传\') } }, // 自定义文件上传方法 uploadFile(file) { // 把文件放入 FormData 进行提交 const param = new FormData() param.append(\'files\', file.file) uploadFile(param).then(response => { // TODO 一些关闭弹框，上传成功提示等 }) }, // 移除附件 handleRemove(file, fileList) { console.log(\'移除附件...\') }, // 附件上传失败，打印下失败原因 onError(err) { message(\'error\', \'附件上传失败\') console.log(err) }, // 字符串重组 strRebuild(str) { return strRebuild(str) } } } |
工具类 JS
strUtil.js
| // 字符串相关工具类
// 数组根据分隔符重组为字符串 export function strRebuild(arr, split) { if (arr === undefined || arr === null || !(arr instanceof Array) || arr.length === 0) { return \'\' } if (split === undefined || split === null) { split = \'，\' } var str = \'\' arr.forEach((v, i) => { if (i === arr.length - 1) { str = str + v } else { str = str + v + split } }) return str } // 截取最后一个特定字符后面的字符串 export function lastSubstring(str, split) { if (str === undefined || str === null || split === undefined || split === null) { return \'\' } return str.substring(str.lastIndexOf(split) + 1) } |
message.js
| import { Message } from \'element-ui\'
// 提示封装 type 提示类型， msg 提示信息，duration 持续时间 export function message(type, msg, duration) { Message({ message: msg || \'success\', type: type || \'success\', duration: duration || 5 * 1000 }) } // 带删除键提示，duration 为 0 时，不会自动消失 // 提示封装 type 提示类型， msg 提示信息，duration 持续时间 export function messageShowClose(type, msg, duration) { Message({ message: msg || \'success\', type: type || \'success\', duration: duration || 0, showClose: true }) } |
API
| // 附件上传
export function uploadFile(file) { return request({ url: \'/uploadFile\', method: \'post\', headers: { \'Content-Type\': \'multipart/form-data; charset=utf-8\' }, data: file }) } |
后端接口
| /**
* 单文件上传 * @param files 接收文件要以数组接收 * @return */ @PostMapping(value=\"/uploadFile\") public void uploadFile(@RequestBody MultipartFile[] files) { // TODO } |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 如何通过ajax实现文件上传(Vue实现附件上传的具体代码介绍)
