Vue使用formData格式类型上传文件的示例
更新时间:2021年09月03日 16:24:42 作者:Web_chicken
这篇文章主要介绍了Vue使用formData格式类型上传文件的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
在vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作。
其中,文件上传算是比较难的一种。这篇文章五分钟教会你上传文件。
1.如图片上传,后端需要前端传formData类型数据的情况下
<el-button type="primary" @click="uploadFile2()">点击上传</el-button> <input type="file" @change="fileValueChange2()" ref="uploadFile2" enctype="multipart/form-data" style="display:none;" accept="image/jpeg,image/png,image/gif">
我们使用原生input的方式来实现。
uploadFile2(){ // 当点击button按钮后会触发此事件 // 作用就是打开文件上传弹框 this.$refs.uploadFile2.click() }, fileValueChange2(){ // 选中文件后,会触发input的change事件,即会进入此函数 var formData = new FormData() // this.$refs.uploadFile2是vue中获取dom元素的方法 // 通过files就可以拿到所有上传的文件,如果是多个文件循环即可 formData.append( 'file',this.$refs.uploadFile2.files[0]) // 必须设置请求类型 formData.append( 'type', "head"); // 如果需要传id的情况下,参考下面代码 formData.append( 'id', this.id); // 配置完成后,只需要向后台传入formData 变量即可 insertNavigationUpload(formData).then(res=>{ console.log('简单吗?老铁') }) },
差点忘记一步,axios请求二次封装我就不多说了,这里只展示下接口
export const tMessageNotification = data =>{ return request({ url:'/tMessageNotification/upload', method: 'POST', data, headers: {'Content-Type': 'application/json'}, }) }
到此这篇关于Vue使用formData格式类型上传文件的文章就介绍到这了,更多相关Vue上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
在Vue3项目中使用VueCropper裁剪组件实现裁剪及预览效果
这篇文章主要介绍了在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果),本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07详解Vuejs2.0 如何利用proxyTable实现跨域请求
本篇文章主要介绍了Vuejs2.0 如何利用proxyTable实现跨域请求,具有一定的参考价值,有兴趣的可以了解一下2017-08-08vue-simple-uploader上传成功之后的response获取代码
这篇文章主要介绍了vue-simple-uploader上传成功之后的response获取代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧~2020-09-09
最新评论