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

赞 (0)

相关推荐

  • vue使用axios上传文件(FormData)的方法

    在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单.模拟表单提交,当然最大的优势就是可以上传二进制文件. 过多介绍不说,过多的煽情语句不说,直接来来干活,希望对广大博友有所帮助.也希望各位大神不吝赐教 1.前台上传文件的表单和响应函数 <!--文件上传表单--> <form> <input type="text" value="&

  • Vue formData实现图片上传

    本文实例为大家分享了Vue formData实现图片上传的具体代码,供大家参考,具体内容如下 import Vue from 'vue' /** * 图片上传 * 已注入所有Vue实例, * template模板里调用 $uploadFile(id) * 组件方法里调用 this.$uploadFile(id) */ const uploadFile = (id) => { let promise = new Promise((resolve, reject) => { let file =

  • vuejs使用FormData实现ajax上传图片文件

    vuejs使用FormData实现ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图 前端实现 <template> <div class="admin"> <d

  • vue+element_ui上传文件,并传递额外参数操作

    需求: 1.文件大小验证 2.文件类型验证 3.额外参数传输 <template> <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="

  • Vue 使用formData方式向后台发送数据的实现

    很多时候在使用form向后台发送数据的时候,并不需要使用到表单组件. 例如时间戳.ip等,这个时候除了ajax之外,还可以使用HTML5的一个全新方法FormData:在input[type = file]的文件类型中,很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时,无法赋值给file文件,只能转换为base64类型传送到后台,然后由后台转换为图片再进行服务器存储:此过程较为复杂: 使用formdata,只需创建新的formdata对象,将要发送的数据添加进去,后台即可接收

  • Vue Element UI + OSS实现上传文件功能

    Element提供了upload上传组件,可以查看官网upload组件的详细介绍:查看upload组件的上传源码upload/ajax,使用的是XHR对象上传文件.在项目实践中,发现该上传方法上传大文件时会出现问题,所以决定使用阿里云对象存储服务(Object Storage Service,简称OSS),OSS详细介绍可以查看官网,本文主要讲解的是OSS上传文件的前端,后台开发请查看官网介绍,SDK Browser.js讲解了前端如何进行上传. 1.使用npm安装SDK的开发包: npm in

  • vue中实现上传文件给后台实例详解

    FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件. (ps:说白了就是不使用form表单实现form表单提交数据或文件,如果还是不懂,请自行百度) 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3.通过选择文件拿到数据 4.请求接口 以上就是本次关于vue中实现上传文件给后

  • Vue使用formData格式类型上传文件的示例

    在vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作. 其中,文件上传算是比较难的一种.这篇文章五分钟教会你上传文件. 1.如图片上传,后端需要前端传formData类型数据的情况下 <el-button type="primary" @click="uploadFile2()">点击上传</el-button> <input type="file" @change=&quo

  • vue中element-ui使用axios上传文件

    vue中element-ui使用axios上传文件

    本文实例为大家分享了vue中element-ui使用axios上传文件的具体代码,供大家参考,具体内容如下 环境:vue2.5.6+axios0.18.1+element-ui2.15.1 在使用element UI的upload组件上传文件时,遇到一些问题,网上的说法不尽如是,在此记录 其实最主要的估计就是axios相关的问题,因我们平时开发的vue项目都是封装过axios后进行api的调用,但上传操作跟一般的api请求不同,所有总是报错,故需要建立新的axios实例. 文件上传类型可以在el

  • php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

    本文实例讲述了php 下 html5 XHR2 + FormData + File API 上传文件操作.分享给大家供大家参考,具体如下: FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"

  • vue el-upload上传文件的示例代码

    话不多说 直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand

  • JavaScript使用Ajax上传文件的示例代码

    本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下: 实现文件的上传主要有两种方式: 使用form表单提交上传 html代码如下: <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id=&

  • SpringBoot 如何优雅的实现跨服务器上传文件的示例

    SpringBoot 如何优雅的实现跨服务器上传文件的示例

    项目完整代码链接:代码链接 跨服务上传文件示意图 一.创建项目 springboot:2.2.6 JDK:1.8 由于资源有限,就用不同端口表示不同服务器了. 1.1 上传文件的项目 首先idea快速搭建工具创建一个springboot项目,名字为fileupload,作为上传文件的服务端. 选择spring web模块即可 配置相关参数 spring.servlet.multipart.enabled=true spring.servlet.multipart.max-file-size=30

  • Python Flask 上传文件测试示例

    目录 Flask file upload代码 上传测试 上传临时文件 使用 tempfile 使用 StringIO 其他 Flask file upload代码 import os from flask import Flask, request, redirect, url_for, send_from_directory from werkzeug.utils import secure_filename UPLOAD_FOLDER = '/tmp/flask-upload-test/'

  • React实现阿里云OSS上传文件的示例

    简介 阿里云 OSS 是 阿里云提供的海量.安全.低成本.高可靠的云存储服务,提供 99.9999999999%的数据可靠性(号称).能够使用 RESTful API 可以在互联网任何位置存储和访问,支持容量和处理能力弹性扩展. 基本术语 1.bucket :类似本地的一个文件夹 2.object : oss 存储数据的基本单元,类似本地的一个文件. 3.region:oss 存储的数据中心所在区域 4.Endpoint:oss 对外服务的访问域名,oss 以 http api 提供服务,不同

  • jquery使用FormData实现异步上传文件

    考虑一个常见的用户上传头像的场景: 点击按钮,弹出文件选择框 选中图片并确认后直接上传图片 实现这个功能,需要使用<input>来添加文件,并实现上传功能.传统的上传文件是将<input>放到<form>中提交,但在这个场景中并不存在form表单,只有一个input而已.那么应该如何处理呢? 答案是可以使用FormData来实现文件的提交. 先看一下MDN对FormData的介绍: XMLHttpRequest Level 2添加了一个新的接口FormData.利用Fo

随机推荐