基于Ajax中formData图片和数据上传的示例分析
这篇文章主要为大家展示了“基于Ajax中formData图片和数据上传的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“基于Ajax中formData图片和数据上传的示例分析”这篇文章吧。
成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、网站制作、柳州网络推广、小程序开发、柳州网络营销、柳州企业策划、柳州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供柳州建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
1、上传组件
说明一下,项目是基于vue框架的
开心就好的小店
- 首页
- 返回货架
- 放弃编辑
- 上架
说明,包含两个上传图片的组件,前面一个有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,
这两句一定要加上,否则数据会被序列化,而导致后端不能识别
以上是“基于Ajax中formData图片和数据上传的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
文章名称:基于Ajax中formData图片和数据上传的示例分析
链接地址:http://ybzwz.com/article/iiccpj.html