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'},})
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！