首页 > 其他分享 >vue上传formdata格式数据(axioes)

vue上传formdata格式数据(axioes)

时间:2022-12-08 10:22:18浏览次数:45  
标签:files vue axioes formdata forms file 上传 append

vue.js 上传formData数据到后台(其他js类似)

 

调用方式还是通过post方式

请求类型要设置一下

config.headers["content-type"] = "multipart/form-data";

 

然后上传的时候分2种情况

1、后台可以直接解析formData格式的,直接创建一个FormData对象提交到后台

let forms = new FormData()

forms.append('name', 'test')
forms.append('age', ''XXX')

let files = document.getElementById('file').files

// 上传多个文件
Array.from(files).forEach(item => {
    forms.append('file', item)
})

axios({
  method: 'post',
  url: url,
  data:forms
})

2、后台不能直接解析formData格式的,要把文件和其他参数拆开提交

      <input @change="uploadclick" type="file" accept="image/*" style="display:none"  />    

       uploadclick: function(e) {    

        var file = e.target.files[0]
文件  let formdata = new FormData();
          formdata.append("dataFile", file);
参数  let params = {
          name: 'XXX'
        }

}

这里axioes封装了

 http({
      method: "post",
      url: url,
      formdata,
      params
    })

 

 

 

 

标签:files,vue,axioes,formdata,forms,file,上传,append
From: https://www.cnblogs.com/sgdkg/p/16965339.html

相关文章

  • vue3中ref和reactive的区别
    ref和reactive都是用来定义响应式数据的。ref允许我们创建一个任意类型的响应式的ref对象,在使用时需要带上.value在模板中使用ref对象时,假如ref位于顶层,就不需要使......
  • vue3 Cropperimage插件写入默认网络图片跨域解决办法----- 图片转换成base64
    最近项目中有一个裁切图片的需求,百度了一番最后选用cropperImage插件。由于项目中图片是存放在阿里云上,cropperImage插件在初始化默认图的时候会存在跨域问题,百度经验我选......
  • vue路由基础 (个人)
    首先要有一个路由的js文件import{createRouter,createWebHashHistory}from"vue-router";importappHomefrom'../views/Home.vue'importitemMusicfro......
  • Vue设计table中的身份证号加密显示
    为了保护用户隐私,需要对身份证号中间进行加密,且需要考虑末尾带有X的情况话不多少直接上代码,运用正则解决:<el-table-columnprop="idcard"label="身份证"width="180">......
  • Vue双向绑定
    什么是双向绑定数据Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,试图也就发生变化,当试图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓......
  • node.js : request to https://registry.npmjs.org/vue failed, reason: connect ETIM
     https://v2.vuejs.org/v2/guide/installation.htmlhttps://v3.router.vuejs.org/installation.htmlhttps://v3.cli.vuejs.org/https://v3.vuex.vuejs.org/installation.......
  • Vue2(笔记25) - 脚手架 - render函数
    render 函数从错误提示开始打开项目入口文件:main.jsimportVuefrom'vue'importAppfrom'./App.vue'Vue.config.productionTip=falsenewVue({render:h=>h(App),......
  • vue 路由重复点击,报错处理
    路由重复点击,控制台会弹出提醒//在VueRouter上配置路由跳转,在router中的index.js中加上以下代码,注意加在use之前constrouterPush=VueRouter.prototype.push;VueR......
  • vue element tree 上移下移
    效果图需求是:上边没有了应该取最后一个  下边没有了应该取第一个       直接上代码;<template><el-tree:key="tree_key"v-loading=......
  • Agileboot 1.6.0 发布啦 - 一款致力于规范/精简/可维护 的Springboot + Vue3的快速开
    ⚡平台简介⚡AgileBoot是一套开源的全栈精简快速开发平台,毫无保留给个人及企业免费使用。本项目的目标是做一款精简可靠,代码风格优良,项目规范的小型开发脚手架。适合个人......