Vue 和 HTML FormData配合axios或ajax上传文件,提交表单数据

简介: Vue 和 HTML FormData配合axios或ajax上传文件,提交表单数据

将本地数据(.xlsx、.docx等文件)上传或导入数据库,有时候需要使用FormData 对象。FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。

一、创建对象:

创建一个FormData对象实例

1、常用的创建

let formData = new FormData();

2、vue中的创建

let formData = new window.FormData();

3、在表单的基础上创建

1.<form id="fromCont" action="" method="post">
    <input type="text" name="content">
    <input type="submit" value="提交">
</form>
//根据id获取表单
  var form = $("#fromCont");
//初始化实例
var formData = new FormData(form);
// 获取content内容
var content= formData.get("content"); 
//通过append() 方法向对象中添加content键值对
formData.append("content",content);

二、操作方法:


formData里面存储的数据形式,一对key/value组成一条数据,key是唯一的,一个key可能对应多个value。如果是使用表单初始化,每一个表单字段对应一条数据,它们的HTML name属性即为key值,它们value属性对应value值。



1、获取值

//通过get(key)/getAll(key)来获取对应的value
formData.get("value");  

2、添加数据

1.//通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾
formData.append("key1", "value1");
formData.append("key2", "value2");
formData.append("key2", "value3");
//获取key1
formData.get("key1");  //返回 "value1"
formData.get("key2");  //返回 "value2"
formData.getAll("key2");  //返回 ['value2','value3']

3、设置、修改数据

1.//通过set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值。
formData.append("key1", "value1");
formData.set("key1", "value2");
//获取key1
formData.get("key1");  //返回 "value2"

4、删除数据

1.//通过delete(key),来删除数据
formData.append("key1", "value1");
formData.delete("k1");
//获取key1
formData.get("key1");  //返回 []

5、判断数据的存在

1.//通过has(key)来判断是否对应的key值,如果有对应的key值就返回true,如果没有则返回false
formData.append("key1", "value1");
formData.has("key1"); // true
formData.has("key2"); // false

三、vue上传文件

1.  <template>
    </div>
      <div class="fileItem">
        //上传文件的input,type设置为file
        <input type="file" ref="fileId" @change="getFile">
      </div>
  </div>
</template>
<script>
export default {
data(){
   return:{
    //赋值input中file内容
    xlsxFile:''
    }
   },
  methods:{
   getFile(){
     //获取file内容
    let files = this.$refs.fileId.files[0];
     this.xlsxFile = files;
   },
    //上传文件
    importRow() {
      let that = this;
      if (that.xlsxFile == "") {
        that.$message.error('请先添加文件');
        return;
      }
    // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
    //创建一个FormData对象,然后通过append() 方法向对象中添加键值对
      let formData = new window.FormData(); 
      formData.append("file", that.xlsxFile);
     // that.importUrl 上传的接口url
      that.$axios.post(
          that.importUrl,
          formData
        ).then(function(response) {
          that.$message.success('上传成功');
        }) .catch(function(error) {
          that.$message.error(res.data.msg);
        });
}
}
</script>

四、HTML中上传文件

1.//HTML中
<div>
<input name="file" type="file" id="fileCont" value="">
</div>
//JS中,这里引入了Jquery
       $('#fileCont').on('change',function(){
       var fileObj = $(this).files[0]; 
       if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
        //这里是我自己定义的弹框方法
        popup({type:'tip',bg:false,msg:"请选择件",delay:1000,clickDomCancel:true});
        return;
         }
        var formFile = new FormData();
         //加入文件对象,向接口传入两个参数file,id
        formFile.append("file", fileObj); 
        formFile.append("id", id); 
         var data = formFile;
          $.ajax({
            url:urlCur,
            data: data,
             type: "POST",
             dataType: "json",
             //上传文件无需缓存
             cache: false,
             //用于对data参数进行序列化处理 这里必须false
              processData: false,
             //必须
             contentType: false, 
             success: function (res) {
               if(res.code === 200){
              popup({type:'success',bg:false,msg:"上传成功",delay:1000,clickDomCancel:true});
              }else{
              popup({type:'error',bg:false,msg:res.msg,delay:1000,clickDomCancel:true});
                }
             },
         }) 
  })

上传文件需要前后端的小伙伴儿配合,一起完成,第一次进行文件上传时,遇到了一些麻烦,比如前端传值的方法不对、后台接口报500,但是只要有耐心,肯钻研,就一定会成功的!

路漫漫其修远兮,吾将上下而求索。


最后

如果对您有帮助,希望能给个👍评论/收藏/三连!


博主为人老实,无偿解答问题哦❤


原文:https://www.jianshu.com/p/51188659d778


相关文章
|
6天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`&lt;form&gt;`可设置提交方法和目标URL,`&lt;button&gt;`及`&lt;input type=&quot;submit&quot;&gt;`用于提交。新元素`&lt;datalist&gt;`和`&lt;output&gt;`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
|
6天前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
|
19天前
|
移动开发 前端开发 JavaScript
HTML 表单和输入详解
HTML 表单是收集用户输入的关键组件,包括多种输入控件如文本框、单选框、复选框、下拉列表等。表单由 `&lt;form&gt;` 标签定义,常用属性有 `action` 和 `method`。输入控件如 `&lt;input&gt;` 和 `&lt;select&gt;` 可实现不同类型的用户输入,而 `&lt;button&gt;` 用于提交表单。HTML5 还提供了表单验证功能,如 `required` 和 `pattern` 属性,确保输入的有效性。结合 JavaScript 可实现更复杂的表单逻辑。掌握表单是前端开发的基础技能之一。
|
19天前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
2月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
2月前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
38 4
|
2月前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
|
3月前
|
存储 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
|
3月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
|
3月前
|
JavaScript
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data