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上传文件内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！