精华内容
下载资源
问答
  • 1.需求vue项目中,通过axios或者二次封装的axios上传文件(图片,文档,工作表等)。后台接收FormData类型的数据。现在的项目一般来说后台接收数据为JSON字符串,接收文件为FormData表单。2.分析一般来说,项目都会对...

    1.需求

    vue项目中,通过axios或者二次封装的axios上传文件(图片,文档,工作表等)。后台接收FormData类型的数据。现在的项目一般来说后台接收数据为JSON字符串,接收文件为FormData表单。

    2.分析

    一般来说,项目都会对axios进行二次封装。直接使用axios,或者自己二次封装axios的情况,应该对请求的各种配置比较清楚了。对axios和网络协议理解不充分并 直接使用其他人二次封装的axios时多会对此有疑问,或者在上传文件时遇到障碍。因为二次封装的axios中的一些前置配置影响到了表单形式的提交。

    3.解决方案

    先说下以表单形式发送的一些前置设置。

    一般我们首先需要一个表单标签,和input标签。这个表单标签的主要作用呢就是生成FormData类型的数据。一般我们有自己的上传文件按钮和预览文件盒子,所以我把原始input[type='file']隐藏了。注意:表单提交形式需要写好对应的name,作为后台读数据时键值对的键。

    图1.标签设置

    js内把数据存为表单形式,将表单的Dom作为参数传入new FormData()中即可获得表单类型的数据。我们直接把这个FormData型的数据传递给后台即可。注意:FormData不能做JSON字符串转换。下图中的config是指请求头headers的设置。

    图2.取数据

    按理来说FormData数据正确,headers设置'Content-Type':'multipart/form-data'就可以正确传递了。这是最表面的设置也是最基本的设置,但是有些同志设置后还是不好用。那么我就要再强调一次,需要写好对应的name,FormData不能做JSON字符串转换.写好name这个大家因该都理解,也是比较低级的错误。那我为什么要强调不能做字符串转换呢。一个原因是在后台在接收其他数据多为JSON字符串,另一个原因就是二次封装的axios可能包含了前置操作(字符串转换)。

    图3.前置操作

    如图3,红框内就是对传递的参数做前置操作(JSON字符串转换)。使用二次封装的axios时一定要查看是否有如上的代码,被这里代码做JSON字符串转换后,就会导致FormData无法正常提交。

    解决方案:1.不使用二次封装的axios,直接使用原型axios。

    2.修改二次封装的axios,添加提交表单类型的情况处理。

    ps.我二次封装过一个axios,包含了传递JSON,FormData,以及接收Blob的情况。

    详情可以阅读我的相关文章 axios二次封装

    ----(之后我又做了promise化的处理,更加方便了,写这篇文章时尚未添加。)

    或者查看我gitee上的源码 axios.js

    转载到其他平台需含本文的简书链接

    展开全文
  • vue Formdata

    千次阅读 2019-05-27 11:47:12
    转载自:https://www.cnblogs.com/yesyes/p/7299500.html
    展开全文
  • 在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。过多介绍不说,过多的...

    在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。

    过多介绍不说,过多的煽情语句不说,直接来活,希望对广大博友有所帮助。也希望各位大神不吝赐教

    1.前台上传文件的表单和响应函数

    提交

    表单可以根据自己需要选择合适的表单,我在此选用的原生表单。

    vue 定义文件数据类型:data () {

    return{

    //文件

    file: '',

    file2: '',

    }

    },

    表单按钮的响应函数getFile(event) {

    this.file = event.target.files[0];

    console.log(this.file);

    },

    getFile2(event) {

    this.file2 = event.target.files[0];

    console.log(this.file2);

    },

    上传单文件和多文件其实都是一样,主要的区别在后台接受文件形式和前台如何向后台传递数据

    主要区别在 submit 响应函数中。

    单文件例子:submit(event) {

    event.preventDefault();//取消默认行为

    //创建 formData 对象

    let formData = new FormData();

    // 向 formData 对象中添加文件

    formData.append('file',this.file);

    http.uploadFile("taskManage/uploadFile2",formData).then(function (response) {

    console.log("res: ",response);

    })

    },

    多文件例子:submit(event) {

    event.preventDefault();//取消默认行为

    //创建 formData 对象

    let formData = new FormData();

    // 向 formData 对象中添加文件

    formData.append('file',this.file);

    formData.append('file',this.file2);

    http.uploadFile("taskManage/uploadFile2",formData).then(function (response) {

    console.log("res: ",response);

    })

    },

    看到这里是不是感觉很搞笑,单文件和多文件的区别竟然在于向 formData 中添加了多少个文件。其实技术就是这样,玩过了,就觉得很好玩越来越有兴趣。

    注: http.uploadFile 是我自己封装的方法,用来上传文件的,为了防止文章没有针对性,就分开写了。

    axios 和 ajax 都支持异步请求,两者使用方法大同小异,在此使用 axios 上传文件的请求。使用的时候只需要在响应的 vue 组件中引入就可以。import Vue from 'vue';

    import VueCookie from 'vue-cookie';

    import axios from 'axios';

    // import toastr from '../assets/toastr.min';

    // Vue.use(axios)

    let http = {};

    // let _baseURL = '/vpaas'

    let _baseURL = 'http://localhost:8080/vpaas'

    let ContentType = "application/json";

    let uploadFileType = "multipart/form-data";

    http.baseURL = _baseURL;

    /**

    * 上传文件的请求

    * @param url

    * @returns {AxiosPromise}

    */

    http.uploadFile = function (url, data) {

    let config = {

    //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url

    url: url,

    //基础url前缀

    baseURL: _baseURL,

    transformResponse: [function (data1) {

    var data = data1;

    if (typeof data1 == "string") {

    data = JSON.parse(data1);

    }

    //这里提前处理返回的数据;

    if (data.message && (data.data === 'login.invalid.token')) {

    window.localStorage.removeItem("access-user");

    alert("超时请重新登陆");

    window.location.href = '/';

    }

    return data;

    }],

    //请求头信息

    headers: {'access-user': window.localStorage.getItem('access-user'), 'Content-Type': uploadFileType},

    //跨域请求时是否需要使用凭证

    withCredentials: true,

    // 返回数据类型

    responseType: 'json', //default

    };

    return axios.post(url, data, config);

    };

    哪里理解有误,欢迎各位大神不吝指教。

    2:后台接受文件

    控制器主要有一个全局的注解:@RequestMapping("taskManage")

    单文件的格式:/**

    * 文件接收控制器

    */

    @PostMapping("uploadFile")

    public Object multipleSave(@RequestParam("file") MultipartFile file){

    logger.info("上传的文件:",file);

    logger.info("上传的文件");

    return null;

    }

    多文件格式:

    后台接受方式有两种,两种都有不同的通途。

    接受的文件个数为有限个时:/**

    * 文件接收控制器

    */

    @PostMapping("uploadFile")

    public Object multipleSave(@RequestParam("file") MultipartFile file,@RequestParam("file2") MultipartFile file2){

    logger.info("上传的文件:",file);

    logger.info("上传的文件2:",file2);

    logger.info("上传的文件");

    return null;

    }

    接受文件个数为无限个时:@PostMapping("uploadFile")

    public Object multipleSave(@RequestParam("file") MultipartFile[] file){

    logger.info("上传的文件:",file);

    logger.info("上传的文件");

    return null;

    }

    利用数组的格式接收多文件,利用 for 循环就可以取出所有的文件,这里就不做一一解释了。

    方法都已经亲测,希望对广大博友有丝毫的帮助。也希望大家多多支持爱安网。

    展开全文
  • 主要为大家详细介绍了Vue formData实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue formData实现图片上传发布时间:2020-09-21 22:05:37来源:脚本之家阅读:92作者:Ajaxguan本文实例为大家分享了Vue formData实现图片上传的具体代码,供大家参考,具体内容如下import Vue from 'vue'/*** 图片...

    Vue formData实现图片上传

    发布时间:2020-09-21 22:05:37

    来源:脚本之家

    阅读:92

    作者:Ajaxguan

    本文实例为大家分享了Vue formData实现图片上传的具体代码,供大家参考,具体内容如下

    import Vue from 'vue'

    /**

    * 图片上传

    * 已注入所有Vue实例,

    * template模板里调用 $uploadFile(id)

    * 组件方法里调用 this.$uploadFile(id)

    */

    const uploadFile = (id) => {

    let promise = new Promise((resolve, reject) => {

    let file = null

    let el = null

    let i = 0

    let formData = new FormData()

    document.getElementById(id).click()

    el = document.getElementById(id)

    el.addEventListener('change', function (e) {

    i++

    if (i !== 1) {

    return false

    } else {

    file = this.files[0]

    formData.append('file', file)

    formData.append('fileType', 'IMAGE')

    // 数据请求

    Vue.axiosfrom(Vue.api.upload, formData).then(res => {

    // 返回图片url

    resolve(res)

    }).catch(err => {

    reject(err)

    })

    }

    })

    })

    return promise

    }

    Vue.prototype.$uploadFile = uploadFile

    axios请求头设置

    import Vue from 'vue'

    import { baseURL } from '@/config/env'

    import axios from 'axios'

    // formdata 请求

    const axiosT = axios.create({

    baseURL: baseURL,

    headers: {

    'Content-Type': 'multipart/form-data'

    }

    })

    const XHR = ({method = 'post', qs = true, loading = false, loginRequire = true, reqComplex = false, reqContentType = 'urlencoded'}) => {

    // 带请求进度条成功方法

    const sucFunX = res => {

    return res.data

    }

    // 成功执行方法

    const sucFunC = res => {

    return res.data

    }

    // 带请求进度条失败方法

    const errFunX = err => {

    console.log(err, NProgress.done())

    }

    // 失败执行访求

    const errFunC = err => {

    console.log(err)

    }

    // 判断是否需要Longing

    const sucFun = loading ? sucFunX : sucFunC

    // 判断是否需要Longing

    const errFun = loading ? errFunX : errFunC

    return {user, sucFun, errFun}

    }

    // 表单请求 图片上传

    const axiosfrom = function (url = '', data = {}) {

    let {sucFun, errFun} = XHR({loading: false})

    return axiosT.post(url, data).then(sucFun).catch(errFun)

    }

    // 表单请求

    Vue.prototype.$axiosfrom = axiosfrom

    Vue.axiosfrom = axiosfrom

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。

    展开全文
  • vue上传图片formdata

    2020-09-25 11:19:09
    diy ... import lrz from 'lrz'; export const upImage = ... const { formData } = await lrz(file); return http.post('/common/uploadali', formData, { headers: { 'Content-Type': 'multipart/form-data' } });.
  • FormData方式 做Vue项目的时候, 提交数据基本上都是用Axios, 之前做过的表单方面的提交,一直没有空隙进行总结,今天得空进行一下复习和总结:Vue中使用Axios处理包含上传文件的表单提交 可能出现的问题: 常见...
  • vue中适应formdata的坑。 报错代码: let myFormdata=new Formdata(); myFormdata.append("upfile",files) 修改后代码: let myFormdata=new window.Formdata(); myFormdata.append("upfile",files) 报错结束,...
  • Vue Post请求FormData传参

    2021-01-13 16:46:04
    Vue Post请求FormData传参'Content-Type':application/x-www-form-urlencoded;设置请求头把传入的参数转化成正常的参数而不是键值对'Content-Type': 'multipart/form-data'设置请求头请求处理 ‘Content-Type’:...
  • vue图片上传formdata

    2020-11-23 13:48:53
    } if (isBMG && isLt2M) { this.myFile = file } return false }, } ajax请求: save() { const params = new FormData() _.keys(this.form).forEach(key => { params.append(key, this.form[key]) }) permission =...
  • VueformData图片上传

    千次阅读 2018-09-30 11:39:18
    import Vue from 'vue' /** * 图片上传 * 已注入所有Vue实例, * template模板里调用 $uploadFile(id) * 组件方法里调用 this.$uploadFile(id) */ const uploadFile = (id) => { let promise = new ...
  •  通常来说这样就可以了 这个地方的this.$http 是axios全局配置然后导入到vue的prototype 问题出于在全局配置的时候因为post请求是formdata格式的,所以要引入qs这个模块用于格式化data数据,但是如果你是使用上传的...
  • vue 原生上传formData类型文件 <form id="fileInput" enctype="multipart/formData"> <input class="addfile" ref="file" type="file" name="file" @change="changesData($event)"> </form> ...
  • let formData = new FormData(); formData.append("file", data); let config = { headers: { "Content-Type": "multipart/form-data", "Access-Token": token } } }; //此时formData中存在file _this.axios...
  • VUE发送Formdata数据,NodeJS接收

    千次阅读 2019-04-29 17:22:14
    VUE发送Formdata数据 参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的。 具体使用方法,参考此链接地址 // 这里我使用的是cropperjs插件,裁剪图片成功执行此方法 crop...
  • service.interceptors.request.use(config => { const token = Vue.ls.get(ACCESS_TOKEN) if (token) { // 让每个请求携带自定义 token 请根据实际情况自行修改 config.headers['X-Token'] = token } // 将请求数据...
  • let formData = new FormData(); formData.append('albumIds', this.addItem.type); formData.append('albumType', this.addItem.type); formData.append('file', this.addItem.file); formData.append('jobName', t...
  • 主要介绍了Vue 使用formData方式向后台发送数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 883
精华内容 353
关键字:

formdatavue

vue 订阅