vue文件提交 FormData方式

vue文件提交 ==>> FormData方式

做Vue项目的时候, 提交数据基本上都是用Axios, 之前做过的表单方面的提交,一直没有空隙进行总结,今天得空进行一下复习和总结:Vue中使用Axios处理包含上传文件的表单提交

可能出现的问题:

常见的问题
1、上传文件应该以什么方式提交, 比如后台是multipart/form-data, 而习惯性以json对象发送数据
(实际上大量插件对数据对象也封装了方法, 所以容易忽略)
2、上传文件提交的格式, 以为将对象改成数组就太天真了
3、语法错误. 比如:>> :on-change=“自定义事件名” 写成>> @on-change=""

前驱知识

一、FormDate

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”,它会使用和表单一样的格式。

每个FormData对象都有一个相关的entry。它最初是一个空列表。entry 由name和value组成。

英文文献:https://xhr.spec.whatwg.org/#interface-formdata

FormData()

使用的时候要创建一个新的 FormData 对象。

let FormData = new FormData();

方法

FormData.append(name, value)`

FormData 对象中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。

append(name, value)append(name, blobValue, filename)

请注意参数name、value和blobValue存在的原因是由于用于编写的编辑软件的限制XMLHttpRequest标准。

FormData.delete(name)

delete (name)方法步骤是从这个条目列表中删除名称为name的所有条目。

FormData.entries()

返回一个包含所有键值对的iterator对象。

FormData.get(name)

返回在 FormData 对象中与给定键关联的第一个值。

  1. 如果在这个条目列表中没有名称为name的条目,则返回null。

  2. 返回此条目列表中名称为name的第一个条目的值。

FormData.getAll(name)

返回一个包含 FormData 对象中与给定键关联的所有值的数组。

  1. 如果在这个条目列表中没有名称为name的条目,则返回空列表
  2. 按顺序从这个条目列表中返回名称为name的所有条目的值
FormData.has(name)

返回一个布尔值表明 FormData 对象是否包含某些键。

如果在条目列表中有一个名为name的条目,则has (name)方法步骤将返回true;否则false。

FormData.keys()

返回一个包含所有键的iterator对象。

FormData.set(name, value)

给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。

set (name, value)和set (name, blobValue, filename)方法步骤如下:

  1. 给予的value要有value值;否则blobValue。
  2. 如果使用name、blobValue和filename,则将entry设为创建条目的结果。
  3. 如果在这个条目列表中有名称为name的条目,那么用entry替换第一个这样的条目,并删除其他条目
  4. 否则,将条目添加到this的条目列表中。
FormData.values()

返回一个包含所有值的iterator对象。

FormData的使用

axios 传参时要注意的

 
//重点在*   
//重点在*   
//重点在*   
//重点在*   
let file = new FormData();//*
  for(let key in data){//*
    file.append(key,data[key]);//*
  };
 axios({
    method:"post",
    url:baseUrl +"/api/cateadd",
    data:file,//*
  }).then(res=>{
     //请求成功返回的数据在这进行操作
     
 }).catch(err=>{
    //请求失败返回的数据在这 
     
 });

URL

URL.createObjectURL(file)

通过URL.createObjectURL(file)可以获取当前文件的一个内存URL,

createObjectURL是同步执行的

createObjectURL返回一段带hash的url,并且一直存储在内存中,直到document触发了unload事件(例如:document close)或者执行revokeObjectURL来释放。

实操

下面使用两种方式进行讲解文件如何提交:

1.使用element-ui

使用element-ui的方便之处就是不用再费劲自己写css样式,有包装好的组件直接引入即可,在这不讲怎么使用element-UI的使用,感兴趣的自己进官网进行查看(官网:https://element.faas.ele.me/#/zh-CN)

使用 element-ui 中的 Upload 组件,

在这里插入图片描述

代码引入以后查看upload组件对应的方法属性,里面有两个方法:on-success和on-change两个钩子函数,

钩子函数说明类型
on-success文件上传成功时的钩子function(response, file, fileList)
response是服务器返回的响应
file一个文件
fileList存放多个文件的数组
on-change文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用function(file, fileList)
file一个文件
fileList存放多个文件的数组

element-UI将返回的file对象封装了一下, 首先我们要拿到真正的文件对象, 使用的时候一定要在提交数据之前看看数据到底在哪里:

真正的File对象是fileList数组中某个元素的raw属性!

真正的File对象是fileList数组中某个元素的raw属性!

真正的File对象是fileList数组中某个元素的raw属性!

真正的File对象是fileList数组中某个元素的raw属性!

重要的事多说几遍!!!!

在这我选择使用on-change,因为element-UI中提供了一个http-request事件来覆盖默认的action, 这样很好的避免了一些异常,on-success虽然通过了验证, 但是在生产环境中由于action地址空所以默认请求当前地址, 出现了404。

<template>
    <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :on-change="changeImg"// changeImg事件名是自定义的
        >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" >
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>

<script>
      //改变图片时,获取图片路径及信息,e 指的是提交上来的文件
        changeImg(e){
          // 1.处理文件大小
          if(e.size > 2*1024*1024){
            alert('文件大小不能超过2M')
            return
          }
          // 2.处理文件后缀
          var ext = ['.jpg','.png','.jpeg','.gif'];
          var extName = e.name.slice(e.name.lastIndexOf('.'));
          if(!ext.some(item=>item==extName)){
            alert('上传文件格式不正确')
            return
          }
          // 上传显示的文件
          // 将文件生成url地址,并显示在页面中
          this.imageUrl = URL.createObjectURL(e.raw)
          // 将文件存放到form.img中
          this.form.img = e.raw;//真正的File对象是fileList数组中某个元素的raw属性!
            
        },
</script>

2.使用原始的方法

自己写好样式:

<template>
	<!-- 自定义文件上传 -->
    <div class="img-box">
        <h3>+</h3>
        <img v-if="imageUrl" :src="imageUrl" alt="">
        <input type="file" @change="changeImg1">
    </div>
</template>

<script>
  changeImg1(e){
       // 取出上传的文件
      let file = e.target.files[0];
      // 1.确认文件大小
      if (file.size > 2 * 1024 * 1024) {
        warningAlert("文件大小不能大于2M");
        return;
      }
      // 2.确认文件格式
      let arr = [".jpg", ".jpng", ".png", ".jpeg"];
      let lastName = file.name.slice(file.name.lastIndexOf("."));
      if (!arr.some(item => item == lastName)) {
        warningAlert("文件格式错误");
        return;
      }
      // 3.获取文件的存储位置用于渲染页面
      this.imgUrl = URL.createObjectURL(file);
      // console.log(this.imgUrl);
      // 4.将文件赋值给要提交的变量
      this.form.img = file;
    },
</script>
使用axios上传form-data可以通过以下步骤完成: 1. 首先,安装axios。在项目目录下执行`npm install axios`进行安装。 2. 在main.js中引入axios,使用`import axios from 'axios'`进行引入。 3. 创建一个FormData对象,使用`let forms = new FormData()`进行创建。 4. 使用`forms.append(key, value)`方法添加需要上传的表单数据。可以通过获取表单元素的值,然后使用`forms.append('name', document.getElementById('name').value)`的方式将数据添加到FormData对象中。 5. 如果需要上传文件,可以通过获取文件输入框的files属性,然后使用`Array.from(files).forEach(item => { forms.append('file', item) })`的方式文件添加到FormData对象中。 6. 创建一个options对象,指定请求的方法为POST,设置dataFormData对象,设置url为请求的地址。 7. 最后,通过`axios(options)`发送请求,完成上传。 下面是一个示例代码: ``` import axios from 'axios' let forms = new FormData() forms.append('name', document.getElementById('name').value) forms.append('age', document.getElementById('age').value) let files = document.getElementById('file').files Array.from(files).forEach(item => { forms.append('file', item) }) const options = { method: 'POST', data: forms, url, }; axios(options); ``` 以上就是使用axios上传form-data的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue 设置axios请求格式为form-data的操作步骤](https://download.csdn.net/download/weixin_38610870/13671122)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [axios 表单(formData方式提交请求,以及文件上传方式](https://blog.csdn.net/rudy_zhou/article/details/113252392)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值