最近做一个项目,关于用户数据和表单上传的项目,碰到了不少坑,这里总结的分享给大家,希望能够帮助大家。(小白,欢迎大家多交流)
多的就不说了,直接来代码吧!!
1、上传组件
说明一下,项目是基于vue框架的
<template> <div class="newproduct"> <div class="topbox"> <div class="shopbox"> <img class="shopicon" src="/UploadFiles/2021-04-02/head.jpg">说明,包含两个上传图片的组件,前面一个有multiple为多文件模式,即一次可选择多张图片,后面的是单文件模式。
2、接下来是图片的预览
viewimg($event) { //获取当前的input标签 var currentObj = event.currentTarget; //找到要预览的图片img标签,亦可动态生成 var img = currentObj.parentNode.children[0]; setImagePreview(currentObj, img); function setImagePreview(docObj, imgObjPreview) { if (docObj.files && docObj.files[0]) { imgObjPreview.style.display = 'block'; imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } } }这一部分的主要功能是将选中的图片进行展示,当然啦,这里并没有出来多张图片的情况
3、核心部分,图片上传
/*采用formData形式上传图片和表单数据*/ upload: function() { var _self = this; var formData = new FormData(); var inputs = $("input.fileupload"); for (var i = 0; i < inputs.length; i++) { var file = inputs[i]; if (inputs[i].files[0]) { formData.append("file", file.files[0], file.files[0].name); } } formData.append('barterCommodityname', _self.goodsname); formData.append('barterSellingprice', _self.price); formData.append('barterContactinformation', _self.phone); formData.append('barterCommodityquantity', _self.number); formData.append('barterCommodityaddress', _self.address); formData.append('barterDescriptioninform', _self.goodsinfo); formData.append('barterCategoryid', _self.goodstype); var _self = this; $.ajax({ type: 'POST', url: 'http://10.145.0.05/goods/addGoods', dataType: "json", data: formData, processData: false, contentType: false, success: function(data) { console.log(data); if (data.code == 200) { console.log("success"); // _self.$router.push('/'); } else { alert(data.message); } } }); }说明:
类似于formData.append(‘barterCategoryid', _self.goodstype); 是一种键值对的形式保存数据,而formData.append(“file”, file.files[0], file.files[0].name); 第一个参数为服务端接收的参数名,第二个为文件对象,第三参数为文件名称,这样可以将多个文件添加为数组的形式给服务器。
后端接收该类型的文件时类型指定为:MultipartFile类型
特别说明:
processData: false,
contentType: false,
这两句一定要加上,否则数据会被序列化,而导致后端不能识别
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年10月02日
2024年10月02日
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】