vue axios上传文件实例

最新推荐文章于 2023-08-29 10:58:53 发布

weixin_30708329

最新推荐文章于 2023-08-29 10:58:53 发布

阅读量178

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/peachmeimei/p/8940877.html

版权

<head>

</head>

<body>

<form>

</form>

window.onload = function () {

Vue.prototype.$http = axios;

new Vue({

el: 'form',

data: {

name: '',

age: '',

file: ''

methods: {

getFile(event) {

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

console.log(this.file);

submitForm(event) {

event.preventDefault();

let formData = new FormData();

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

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

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

let config = {

headers: {

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

}

this.$http.post('/upload', formData, config).then(function (res) {

if (res.status === 2000) {

/*这里做处理*/

}

})

}

})

}

</script>

</body>

</html>

转载于:https://www.cnblogs.com/peachmeimei/p/8940877.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30708329

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue中使用axios以FormData形式提交数据

m0_51431448的博客

06-24

3018

axios使用formdata方式提交数据

vue+axios实现文件下载及vue中使用axios的实例

10-17

2. **创建 Axios 实例**：为了在 Vue 中更好地管理 Axios，通常会在项目中创建一个单独的配置文件，如 `api/index.js`。在这个文件中，你可以定义 Axios 实例并设置基础 URL、请求头、处理请求和响应的转换函数等。...

参与评论您还未登录，请先登录后发表或查看评论

原生axios 的form表单提交

weixin_41949511的博客

06-25

8709

axios默认发送数据时，数据格式是Request Payload，而并非我们常用的Form Data格式 1.第一种方法，创建表单对象，数据放到表单对象里。 let config = { //formData 提交请求头有两种 multipart/form-data 和 application/x-www-form-urlencoded // multipart/fo...

JavaScript之Ajax-axios表单提交

AK Zzz的博客

11-17

6081

JavaScript的Ajax-axios表单提交,头像上传,图书管理,可能会有你想看的知识点......

axios模拟表单提交

piglite的专栏

08-29

1061

config里面设定发起post请求时的额外设置，header是设置（config）的一部分，而header中需要显式的设置content-type为application/x-www-form-urlencoded，这样对于服务器来说这就是一个表单提交数据的请求。点击登录按钮时，将双向绑定的formData提交到controller。如果是表单提交的数据，那么handler接收的方式不用添加任何额外的注解，利用名称对应，类型正确的方式就可以接收表单数据了。

vue axios使用form-data的形式提交数据

仗剑天涯，从摘要开始

04-26

1166

vue axios request payload form data由于axios默认发送数据时，数据格式是Request Payload，而并非我们常用的Form Data格式，PHP后端未必能正常获取到，所以在发送之前，需要使用qs模块对其进行处理。 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form...

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

10-17

请注意，`http.uploadFile`方法并不是标准的Axios实例方法，而是作者封装的上传文件的方法。在实际使用中，你需要根据实际情况封装符合自己需求的上传方法。 Axios在Vue.js项目中的使用一般是在组件中引入Axios模块...

vue项目中使用axios上传图片等文件操作

10-19

本篇文章将详细讲解如何在Vue.js项目中使用axios进行文件上传，特别是图片的上传。首先，了解axios的基本特性是必要的。axios支持在浏览器端和Node.js环境中使用。它支持创建XMLHttpRequests从浏览器发出，也支持...

axios+Vue实现上传文件显示进度功能

10-17

在本文中，我们将探讨如何使用axios和Vue.js框架来实现文件上传并实时显示上传进度的功能。这个功能在现代Web应用中十分常见，特别是在处理大文件上传时，用户界面的反馈至关重要，以提供良好的用户体验。首先，...

axios 表单（formData）方式提交请求，以及文件上传方式

热门推荐

rudy_zhou的博客

01-27

5万+

axios 表单（formData）方式提交请求，以及文件上传方式一、使用表单格式请求二、上传文件总结一、使用表单格式请求更改请求头 headers 中 content-type 为 application/x-www-form-urlencoded axios 官方文档 application/x-www-form-urlencoded 格式请求例子： import qs from 'qs'; const data = { 'bar': 123 }; const options = { me

axios针对后台只收form表单形式的post提交

01-20

现在普遍的前后端分离开发，用的都是这种 Content-Type 为 application/json 然而对于一些以前的java服务器，为求代码简单，规定传输的字符串数据格式为 application/x-www-form-urlencoded，所以 form 表单提交和 $.ajax 都是默认 application/x-www-form-urlencoded 请求长这个样子 curl 'http://192.168.11.88:8080/r_server_manager/api/open/user/vo' -H 'Connection: keep-alive' -H 'Prag

axios post提交formdata的实例

08-27

下面小编就为大家分享一篇axios post提交formdata的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue axios 中提交表单数据(含上传文件)

08-30

本篇文章主要介绍了Vue axios 中提交表单数据(含上传文件)，具有一定的参考价值，有兴趣的可以了解一下

解决在Vue中使用axios用form表单出现的问题

10-16

今天小编就为大家分享一篇解决在Vue中使用axios用form表单出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

axios表单提交

香蕉你个芭呐呐的博客

11-14

1077

axios以表单方式提交数据时，需要将参数转换一下第一种方法： header里的Content-Type设置为：application/x-www-form-urlencoded encodeURIComponent()会对它发现的任何非标准字符进行编码。防止特殊字符丢失。 var postData = []; for (var key in params) { postData.p...

vue axios 使用表单形式进行数据提交

Vintage

12-20

2969

axios 默认使用的是json字符串形式去提交数据，但后端极力要求使用表单形式提交数据(说是json字符串还需要转，会消耗性能)。由于需要使用表单的数据形式，在前端的项目里面，则需要对数据进行转换，使之成为后端能够接收的表单数据。为了方便对请求进行控制，我将axios进行了封装，方便请求（响应）的拦截，这里就只贴部分代码。首先...

vue 使用 axios 提交表单数据（含 FormData 上传文件）

qq_36437172的博客

01-27

4392

这里主要介绍如何使用 formData 对象上传文件。FormData 是 XMLHttpRequest Level 2 新增的一个对象，用来提交表单，其最大的优势是上传二进制文件。  <form> <input type="text" value="" v-model="name" placeholder="请输入用户.

axios 多文件Form表单提交

weixin_42429220的博客

10-26

477

设置 headers let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } } 使用 FormData 设置参数 let fromData = new FormData() // 参数为对象时，使用 JSON.stringify 转字符串 fromData.append('operation', JSON.stringify( pam

vue axios代码封装示例

最新发布

09-20

### 回答1： Vue Axios 代码封装示例可以参考如下：// 创建 axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url withCredentials: true, // send cookies when cross-domain requests timeout: 5000 // request timeout })// request 拦截器 service.interceptors.request.use( config => { // 在发送请求之前做一些处理 // ... return config }, error => { // 对请求错误做些什么 return Promise.reject(error) } )// response 拦截器 service.interceptors.response.use( response => { const res = response.data // 如果返回的状态码不是200，则reject if (res.code !== 200) { return Promise.reject(res.message || 'Error') } else { return res } }, error => { return Promise.reject(error) } )export default service ### 回答2： Vue axios 提供了一种方便的方式来发送 HTTP 请求和处理响应。以下是一个简单的示例，展示了如何封装 axios 代码。首先，需要在项目中安装 axios： ``` npm install axios ``` 然后，在你的Vue组件中，你可以创建一个名为axiosService.js的文件，并将以下代码添加到该文件中： ```javascript import axios from 'axios'; // 创建一个 axios 实例，可以在所有的请求中共享该实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置请求的基础URL timeout: 5000 // 设置请求超时时间 }); // 请求拦截器，在发送请求前可以对请求进行一些处理 instance.interceptors.request.use( config => { // 在请求发送前做一些处理，例如添加 token 到请求头部 config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token'); return config; }, error => { // 处理请求错误 console.error(error); return Promise.reject(error); } ); // 响应拦截器，在接收到响应后可以对响应进行一些处理 instance.interceptors.response.use( response => { // 在接收到响应数据前做一些处理 return response.data; }, error => { // 处理响应错误 console.error(error); return Promise.reject(error); } ); export default instance; ``` 现在，在你的 Vue 组件中，你可以导入 `axiosService.js` 并使用 `axios` 实例来发送请求： ```javascript import axiosService from '@/axiosService'; export default { data() { return { users: [] }; }, methods: { getUsers() { axiosService.get('/users') .then(response => { this.users = response; }) .catch(error => { console.error(error); }); } }, mounted() { this.getUsers(); } }; ``` 这是一个简单的封装示例，当然你可以根据你项目的需求来进行更复杂的封装。这样可以提高代码的可重用性，并使代码更易于维护。 ### 回答3：以下是一个Vue Axios代码封装的示例：首先，我们需要安装`axios`和`vue-axios`，可以通过npm或者yarn进行安装。然后，我们创建一个util文件夹，并在其中创建一个`http.js`文件。在`http.js`中，我们导入`axios`和`vue-axios`，同时创建一个名为`http`的实例，并设置其基本的请求配置。 ```javascript import axios from 'axios'; import VueAxios from 'vue-axios'; import Vue from 'vue'; Vue.use(VueAxios, axios); const http = axios.create({ baseURL: 'http://api.example.com', // 设置默认的请求地址 timeout: 5000, // 设置请求超时时间 headers: { 'Content-Type': 'application/json', // 设置请求头类型 }, }); export default http; ``` 在`http.js`中，我们创建了一个名为`http`的实例，这样我们可以在整个项目中使用该实例来发送请求，并可以设置一些默认的请求配置。接下来，我们可以在其他需要发送请求的组件中引入`http.js`文件，并使用`http`来发送请求。 ```javascript import http from '@/utils/http'; export default { methods: { fetchData() { http.get('/data').then(response => { // 处理响应数据 }).catch(error => { // 处理错误 }); }, sendData() { const data = { // 请求的数据 }; http.post('/data', data).then(response => { // 处理响应数据 }).catch(error => { // 处理错误 }); }, }, }; ``` 在上述示例中，我们首先引入了`http.js`文件，然后通过使用`http`来发送请求。我们可以使用`http.get`来发送GET请求，使用`http.post`来发送POST请求，等等。在请求的结果中，我们可以使用`.then`来处理成功的响应，使用`.catch`来处理错误。通过封装`http.js`文件，我们可以在整个项目中使用同样的请求配置，同时也可以更好地管理请求和错误处理的逻辑。