如何在vue组件上传递上传的文件和使用axios传递参数？
在Vue组件中上传文件并使用axios传递参数的方法如下：
- 首先，在Vue组件中创建一个文件上传的input元素，并为其添加一个change事件监听器，以便在选择文件时触发上传操作。
<template>
<div>
<input type="file" @change="handleFileUpload">
<button @click="submitForm">提交</button>
</div>
</template>- 在Vue组件的methods中定义handleFileUpload方法，用于获取上传的文件。
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
submitForm() {
// 在这里调用axios发送请求，并将文件和其他参数一起传递
const formData = new FormData();
formData.append('file', this.file);
formData.append('param1', this.param1);
formData.append('param2', this.param2);
axios.post('/upload', formData)
.then(response => {
// 处理上传成功的逻辑
})
.catch(error => {
// 处理上传失败的逻辑
});
}
}- 在后端服务器中，接收到这个上传请求时，可以使用相应的后端框架来处理文件上传，并获取传递的参数。
- 关于axios的使用，可以在Vue组件中引入axios库，并在发送请求时使用axios.post方法来发送POST请求。需要注意的是，由于文件上传需要使用FormData对象来传递文件和参数，所以需要将axios的请求头设置为
multipart/form-data。
综上所述，以上是在Vue组件中上传文件并使用axios传递参数的方法。
相关·内容
1回答
我似乎无法在vue项目中使用axios，因为它意味着当我尝试在Home.vue文件中使用axios时没有定义'axios‘。我在配置main.js的地方做错了什么吗？还是我遗漏了一些需要添加的东西？下面是我为main.js编写的代码，它展示了我如何在我的项目中添加axios。
import Vue from 'vue';
import GSignInButton from 'vue-google-signin-button';
import ElementUI from 'element-ui';
import axios from &#
浏览 4提问于2021-04-26得票数 0
1回答
我试图从显示在details视图中的API url获取详细信息。单击路由器链接后，它会转到id的路由，但细节不会显示，因为在获取请求中，我似乎没有到达id。
如何在Vue中传递提取函数中的id？
HomeView.vue
<template>
<div class="home">
</div>
<div>
<button @click="getPosts">Load scents</button>
<h3 v-if="errorMsg">{
浏览 4提问于2022-11-06得票数 0
2回答
我正在学习Vue，并尝试测试如何将用户输入从一个函数传递到另一个函数。
我的用例是这个。我希望接受用户输入，存储它，然后将它作为一个变量提供给第二个函数，它可以用来进行API调用。
单独地，这两个代码部分是：
用户输入
<div id="v-model-basic" class="demo">
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
</div&
浏览 2提问于2021-11-18得票数 4
回答已采纳
1回答
Vue原型Axios
、、、
我对vue和类星体很陌生。
现在，我了解到 Vue是如何工作的，
我试着理解当我们进入类星体时得到的样板代码
在启动过程中，我要求它集成axios和cli中的veux。
现在我试着理解锅炉板，当我在插件文件夹中偶然发现axios.js文件的时候。
该文件包含以下代码
import axios from 'axios'
export default ({ Vue }) => {
Vue.prototype.$axios = axios
}
有人能告诉我这个代码是干什么的吗？根据我的理解，它似乎为vue添加了一个称为axios的方法，这样我们就可以在全局上使用它了吗
浏览 0提问于2019-02-11得票数 5
我创建了一个新项目，使用：
vue create hello-world
生成一个包含HelloWorld.vue、app.vue、main.js (等)的新项目文件。
现在，我按照docs 安装了Axios
npm install --save axios vue-axios
我在main.js文件中导入了Axios：
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
现在我遇到了一个我不明白的问题。VueAxios文档说，您只需这样
浏览 10提问于2020-10-08得票数 23
回答已采纳
我开始使用vue.js和laravel进行一个小项目，我想知道如何将刀片语法放入vue.js模板代码或axios中：
axios.post("{{ route('myRouteName') }}", $('#add-related-contact'))
谢谢
浏览 4提问于2020-06-29得票数 0
1回答
我想显示从Axios库中提取的JSON信息。使用我的{{ id }}，我想在请求中调用某个param。
我有一个外部js文件.
const Home = {
template: `
<div class="user">
<h2>user {{ id }}</h2>
bet
</div>
`,
props: {
id: {
type: String,
default: 'N/A&
浏览 2提问于2019-01-12得票数 1
1回答
我想使用.js中的mapState从Vue.js文件中访问我的状态。
我试过了
import { mapState } from 'vuex';
const foo = {
...mapState(['axios']),
};
foo.axios.get('...');
但不起作用。错误是
TypeError: foo.axios.get is not a function
我应该怎么做才能做到这一点？
我已经搜索了其他问题，但是他们从store.state. ...访问，而不是使用我想要的mapState。
浏览 0提问于2019-08-02得票数 3
回答已采纳
1回答
我用vue-cli 3创建了一个项目，所以我运行：
>vue create my-app;
>cd my-app
>vue add axios
在my \src\plugins\文件axios.js中使用以下代码创建vue：
"use strict";
import Vue from 'vue';
import axios from "axios";
// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL
浏览 1提问于2018-10-23得票数 7
回答已采纳
我有一个向laravel路由发出axios请求的vue js组件。但是在vue文件中，我不能访问route()函数，现在必须使用静态url。下面是一些代码: web.php：
// API
Route::group(['prefix' => 'api'], function() {
// GET
Route::get('/brands', 'BrandsController@getBrands')->name('api-get-brands');
Route::get('
浏览 1提问于2017-10-26得票数 11
回答已采纳
1回答
我第一次玩vue，已经创建了一个简单的测试文件。我有一个表，该表由api调用中的数据填充，并使用vue路由器创建到每个项的链接，但这个链接没有显示内容。网络显示它正在向api发出请求，但由于某种原因，模板没有显示(甚至不显示硬编码的内容)。为什么？另外，为什么路由内容不显示在第一个路由器视图上，而只显示在tbl组件中的路由器视图？
<!doctype html>
<html lang="en">
<head>
<title>Vue.js test</title>
<meta charset=
浏览 2提问于2017-10-29得票数 0
回答已采纳
我正在用Vue js学习laravel我正在用vue js组件实现一个搜索引擎，我希望你能提前帮助我谢谢。
这是我的Vue js组件，我的输入搜索就在这里。
<template>
<div class="container">
<form>
<input
class="form-control"
placeholder="buscar"
type="s
浏览 0提问于2020-12-03得票数 0
回答已采纳
错误：
Vue警告:属性或方法"$v“不是在实例上定义的，而是在呈现期间引用的。通过初始化此属性，确保此属性是反应性的，无论是在data选项中，还是对于基于类的组件。见：。
找到位置
->在resources\assets\js\components\products\Product_create.vue
我使用Vue.js和Vue.js作为验证器，我从这里复制和粘贴了这段代码，但是它仍然不能工作：
Vue组件:
<template >
<input v-model="$v.text.$model" :class=&#
浏览 0提问于2018-08-22得票数 4
回答已采纳
我的localhost REST端点上有一个products JSON数组，我希望在我的Vue App中显示该数组，从而产生axios。我已经在"data“中定义了一个空数组，以使其具有响应性，但我不断得到"products”is not defined on instance“error，Screenshot： ? 我的Products.vue文件： <template>
<div>
<h1>Products</h1>
<div class="card" v-bind:key="
浏览 55提问于2021-05-08得票数 0
回答已采纳
我已经在Vue.js中重用了我的组件，并尝试使用'beforeRouteEnter‘导航保护来更新该组件中的数据字段。但是组件没有更新。我是不是应该用另一个导航员？ beforeRouteEnter (to, from, next) {
this.getServices()
next()
},
methods: {
getServices() {
axios.get('/service').then(res => {
console.log(res)
}).catch(err => {
conso
浏览 15提问于2019-04-07得票数 0
我正在使用Django和VueJ进行一个小项目。一切都很好，我只想知道如何在发出Axios请求之后，从我的组件(Modal)向另一个组件发送数据？这是我的密码：
注意:请阅读我的代码评论，了解我想做什么。
儿童: AddContact.vue
methods: {
post(){
getAPI.post('api/contact/post/', this.form).then((response) => {
// here I want to send response data to Contact.vue
浏览 2提问于2021-03-21得票数 3
回答已采纳
我使用vue-cli，这是我的main.js.In Vue的单一文件组件结构的一部分，我使用axios代替ajax。
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
new Vue({
el: '#app',
template: &
浏览 2提问于2017-08-12得票数 1
在Vue2-Dropzone中上传文件时，默认参数名为" file“。但我需要自定义它为“上传”。 我尝试使用vdropzone-sending方法来更改它。但是它发送了两个参数"file“和"upload”。 需要更换后台才能接受param "file“吗？或者有没有办法定制默认的参数名(“file”)？ <vue-dropzone v-on:vdropzone-sending="sendingEvent">
</vue-dropzone>
...
methods: {
sendingEvent (file, xh
浏览 29提问于2020-08-27得票数 0
回答已采纳
我在组件中构建了一个带有VueJS的文件上传表单，我使用axios并通过post请求将数据提交到后端(Laravel)，在那里我将文件的名称保存在数据库中。
我正在寻找一种循环遍历所有已经上传的文件，并在视图中一次显示它们的方法。我预计这将在Vue组件中完成，但我不知道是否需要在laravel控制器中保存文件后重定向到该组件，或者在vue代码中使用“v-for”循环。不管是哪种情况，我现在都无法得到一份名单。
在每次上传的旁边看到文件的一个小图像(徽标)也是很好的。
Vue代码：
<template>
<div class="container">
浏览 0提问于2020-09-06得票数 0
我目前在我的web应用上使用Vue进行面向对象的表单验证，所以我所需要的只是后端验证，而vue会处理剩下的事情。
这意味着，如果我的应用程序有很多表单，这些表单大多是页面特定的，那么我最终会在Vue实例中使用很多方法和数据。
new Vue({
el: '#mainDiv',
data: {
profile_text: '',
name: ''
//LOTS OF DATA THAT I'M LEAVING OUT
errors: new Errors()
浏览 1提问于2019-06-01得票数 0
3回答
我是Vue.js和Axios的新手。当在组件中使用时，我不太明白如何让data选项工作。
为什么我的测试不工作？
我在控制台中得到以下错误：
Vue警告："data“选项应该是在组件定义中返回每个实例值的函数。Vue警告:属性或方法“符号”不是在实例上定义的，而是在呈现过程中引用的。确保在data选项中声明反应性数据属性。(在根实例中找到)
我的简单测试：
My data (为了简洁起见)：
[{"id":1, "name": "Airfield"}, {"id":2, "name": "S
浏览 14提问于2017-02-22得票数 32
回答已采纳
我是Vue的新手，所以这一点可能很明显，但我肯定遗漏了一些东西。我一直在我的.vue文件中收到错误：[Vue warn]: Missing required prop: "productInfo"。它说它是在ProductSlider.vue中发现的。
ProductSlider.vue
<template>
<div
id="recommendedProducts">
<h2>{{ params.headerText }}</h2>
<div
class=&#
浏览 2提问于2018-11-20得票数 1
回答已采纳
我正在尝试在我的Ruby Sinatra项目中使用Axios。我的ruby文件中定义了一个url。 post '/follow/:id' do
# do something
end 在我的erb文件中，我试图将视图中的变量传递给我的内联脚本。 <body>
<div id="follow_element">
<button v-on:click="followUser">Follow</button>
</div>
<script>
浏览 87提问于2020-03-31得票数 0
回答已采纳
1回答
组件之间的数据通信问题
、、、
我有一个页面，上面有一个页眉，输入是搜索引擎、帖子列表和分页。我决定将这个文件的头文件移到一个单独的vue文件中的一个单独的组件中。在我这样做之后，按标题搜索帖子就停止了，我现在也不能添加帖子了。我认为我需要为我新创建的组件导入我的帖子到一个新文件中，但是如何做到这一点。
更改后，我的代码不能工作：
我的帖子所在的文件：
<template>
<div class="app">
<ul>
<li v-for="(post, index) in paginatedData" class="
浏览 30提问于2019-04-23得票数 0
2回答
Vue.js组件不会呈现
、、、
我有一个组件，它使用axios将一些数据带入我的页面。对数据的请求从未提出过。这是我的代码：
在App.vue中：
<template>
<div id="app">
<Prices/>
</div>
</template>
<script>
import Prices from './components/Prices.vue'
export default {
name: 'app',
components: {
Prices
}
浏览 2提问于2018-12-14得票数 1
回答已采纳
我的PHP文件中有两个vue组件: application和vn组件。我想从vn组件获取{{obj.vacancies_left}}，并在应用程序组件中调用它。我怎么发动汽车呢？我一直收到未定义的变量。我试着通过getElementById获取它，但它显示了未定义的变量。
应用程序vue组件
var application = new Vue({
el: '#engineerlist',
data: {
engineer: [],
allData: '',
actionButton:'Enr
浏览 1提问于2021-11-03得票数 0
1回答
我想在asyncData中访问我的Vuex数据，但是我不能访问，而且我似乎不能在asyncData中使用axios模块。
我试了很多次。
pages/index.vue
export default {
asyncData() {
//in my project there's a lot more code here but i think this is enough
let id = this.$store.state.id //i know i should prob use getter but no
//here i want to do an
浏览 1提问于2019-07-28得票数 0
我正在使用Vue.js学习Laravel，我面临着一个问题，我无法通过研究Laravel和Vue.js手册或通过互联网筛选来解决这个问题。
我有一个blde.php文件，其中我使用vue-模板。模板名为Articles.Vue，它应该出现在两个-tags之间。
渲染有一个问题。我有一个名为app.js的文件，需要Articles.vue：
require('./bootstrap');
window.Vue = require('vue');
Vue.component('articles',
require('./componen
浏览 2提问于2020-09-26得票数 3
3回答
嗨，我有两个组件，我在一个组件中得到响应，需要传递和推送父组件的数组。下面是我的代码。我还没有收到回复。在Userstatuscomponent.vue中，我只有几个方法，无论我在那里得到什么响应，我都希望将它传递给UserComponent.vue并将其推送到users[]数组中。我想我做错了什么。请帮帮我。UserComponent.vue
<template>
<div>
<Status v-on:updateStatus="receiveResponse(userData)"></Status >
浏览 0提问于2021-07-29得票数 0
我正试图围绕Vue --特别是，将数据从Vue实例传递给组件。我还使用了Vue-路由器和Axios，这是一个非常简单的项目，只有一个JavaScript文件。
index.html的重要部分如下所示：
<div id="app">
<!-- Navigation -->
<ul>
<router-link tag="li" to="/" exact><a>Home</a></router-link>
<rou
浏览 2提问于2017-04-16得票数 1
1回答
在这里，我已经编写了用于多个上传的vue.js代码，只有一个输入字段。这工作得很好，但问题是，当我们上传文件时，它会显示上传的文件数，但我希望显示我们正在上传的文件的名称。所以我们可以这样做吗?请让我知道。 <html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></scr
浏览 40提问于2021-10-20得票数 1
回答已采纳
1回答
我试图为引用this.$route.params的组件编写一个故事。我不知道如何在故事的上下文中综合定义this.$route。我认为解决方案是使用装饰器，但是文档中的所有示例都侧重于呈现，比如添加包装<div>等等。我不知道如何注入值。
我还找到了针对这种情况而设计的，但它已经多年没有维护了，自述文件引用了过时的语法，与现代版本的Storybook不匹配，所以我不认为它是一种选择。
以下是不起作用的地方：
import AssetShow from '../app/javascript/src/site/components/assets/Show'
e
浏览 4提问于2022-09-16得票数 1
1回答
我有一个创作照片的项目。我希望每一张照片都是vue组件。
我发送一个axios请求，在回答之后，我想逐一插入每一张照片，但是每一张照片都必须是一个vue组件。
axios.get('/api/prepare?query='+encodeURIComponent(this.text))
.then(function(result){
const result_data = result.data;
self.images = result_data.images;
浏览 0提问于2017-12-15得票数 0
在主页中，我已经得到了我想要的值"time“和"breedKey”。现在，我如何在另一个Vue文件中使用它们呢？ data() {
return {
time:[]
}
},
computed: {
breedKey() {
return this.breeds[this.currentBreed].key;
}
} 这是我想要传递数据(breedKey，<script> )的子页面时间，我想使用这样的参数。不太确定逻辑是不是太简
浏览 34提问于2020-04-12得票数 0
3回答
我想使用Vue.js的MVC Core2.1多页网页应用程序，但我认为我的方法有点古怪。
我已经搜索了很多更好的方法来构造我的代码。我还看了PHPLaravel5.x是如何做到这一点的，他们似乎采取了与我所使用的方法相同的方法。
我的方法
我已经创建了一个main.js文件，在该文件中我全局注册了一些组件，而那些只被特定组件使用的组件当然只能在本地注册。所以，基本上每一页都会有它自己的组件.(顺便说一下，我用Webpack)
import Vue from 'vue';
import Axios from 'axios';
import BaseLayout
浏览 0提问于2018-07-02得票数 1
1回答
我正在使用Vue 3组合api和类型记录。
我想让Axios插件在我的项目中使用。
这是我的密码
plugins/axios.js
import axios from 'axios'
const axiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_URL,
})
export default {
install: (app, options) => {
app.config.globalProperties.$axios={ ...axiosInstance }
浏览 5提问于2022-08-04得票数 1
回答已采纳
1回答
我想通过Vue-router插件创建到组件的简单链接。
为此，我创建了如下所示的routes.js文件：
import VueRoute from 'vue-router';
let routes = [
{
path: '/',
component: './components/Home'
},
{
path: '/About',
component: './components/About'
}
];
expor
浏览 3提问于2017-07-01得票数 0
使用axios制作一个黑客新闻克隆。数据不会传递给NewItem.vue组件。返回一个错误- TypeError:无法读取未定义属性的“标题”。告诉我代码有什么问题。为什么没有传送数据？问题出在道具上吗？
NewItem.vue:
<template>
<div class="news-item">
{{ story.title }}
</div>
</template>
<script>
export default {
props: ['story'],
};
浏览 2提问于2020-05-01得票数 0
回答已采纳
我的堆栈包括: Nuxt (Vue)，Express.js，Axios
当我发出一个失败的REST电话时，如下所示：
axios.get('api/data-test');
我在客户身上看到了这个：
xhr.js:172 GET http://localhost:3000/api/data-test 500 (ReferenceError)
dispatchXhrRequest @ xhr.js:172
xhrAdapter @ xhr.js:11
dispatchRequest @ dispatchRequest.js:59
Promise.then (async)
requ
浏览 1提问于2019-08-24得票数 0
回答已采纳
1回答
我对组件使用vue.js有了新的认识，这是一个需要使用NPM的库。
到目前为止，我使用bundle.js将我的核心代码与.vue文件一起编译成一个bundle.js文件。它与我的组件一起工作，但是当添加类似Axios的东西时，它找不到库。
所以我做了NPM install axios --save-dev，给我买了图书馆。
然后我的vueCore.js文件
var $ = require("jquery")
var Vue = require('vue')
var axios = requi
浏览 0提问于2017-01-04得票数 1
回答已采纳
我目前有一个可以接受单个CSV文件的文件上传器。然后，使用axios将这样的文件发送到服务器，一切都很正常。我无法实现的是能够上传另一个CSV，该CSV将被添加到已上传的CSV列表中。我不是在说一次上传不同的文件，我是说在不同的时间点上传不同的文件。
这是用于在.vue文件中选择CSV文件的方法。
staticCampaignCSVSelected: function (file) {
console.log('campaign-detail.vue#staticCampaignCSVSelected', file)
let vc = this
vc.select
浏览 3提问于2018-03-03得票数 0
我有一个HTML和引用的vue和vue路由器。
现在，如果我想使用axios，我可以通过直接调用路径来获得返回数据。
但是我希望我可以设置文件集中管理apiUrl和apiName并导入它们。
index.html
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
浏览 1提问于2021-03-11得票数 1
回答已采纳
所以我在做一个选择，当你选择一个选项时，它运行一个函数。问题是，我的navbar.vue中的选择和函数都在index.vue中。
函数需要在index.vue中，因为它从我的数据库收集产品列表，并将它们加载到我的HTML中。
我是否可以在index.vue中从navbar.vue运行函数，或者在navbar.vue中运行相同的函数，但将输出发送给index.vue？
下面是一个如何更好地理解这一问题的方案：
When option selected Navbar.vue --> Runs changeCountry function in index.vue
或
When option
浏览 2提问于2020-07-11得票数 0
回答已采纳
所以我正在做从Vue到Laravel的axios post请求，我有一些输入和文件上传的表单。
这是我的axios调用：
axios.post('/dashboard/api/partners', this.model.$, )
then(response => console.log(this.model.$))
}
我提交的this.model.$如下所示：
然后我尝试用$request->file('logo')->store('images')获得logo: File，但是我得到了"Call to
浏览 0提问于2021-07-16得票数 1
4回答
我想使用vue.js版本3上传文件。
我可以导入ref，但不确定如何使用它获取文件数据？
FileUploadTest.vue
<template>
<h1>File Upload</h1>
<div class="container">
<div>
<label>File
<input type="file" id="file" ref="file" v-on:change="onChangeFileUplo
浏览 0提问于2021-01-13得票数 5
回答已采纳
2回答
我构建了以下组件：
var Modal = Vue.component('modal', {
template: `
<div id="modal" class="modal">
<div class="modal-content">
<p>{{ link }}</p>
</div>
</div>
`,
props: [
浏览 4提问于2018-01-21得票数 1
我需要将id参数传递给我的组件并调用它的更新(重新呈现->而不重新加载页面) 我有一个具有头像加载方法的组件 settings.vue <template>
... download form and button with onUploadImg method
</template>
<script>
methods: {
onUploadImg() {
if(this.avatarFile == null) return;
var formData = new FormData();
浏览 12提问于2019-03-03得票数 2
回答已采纳
2回答
我正在学习Vue.js。
我有一个运行良好的代码：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(store).use(router)
app.mount('#app')
现在我想添加一些导入，例如'axios‘。此代码不运行：
import { crea
浏览 0提问于2020-11-20得票数 4
回答已采纳
1回答
将Vue路由参数标题转换为id
、、、、
我正在创建一个课程网站，每个课程都有自己的页面。假设我打开第1门课程，然后链接是http://localhost:8080/course/1。我想将其更改为http://localhost:8080/course/course-name-here。我的问题是，当我更改参数时，数据不是从API获取的。 index.js {
path: '/courses',
name: 'Courses',
component: () => import(/* webpackChunkName: "about" */ '..
浏览 24提问于2020-12-12得票数 1
回答已采纳
1回答
我对使用打字稿很陌生，但我对它和Vuex/Axios没有很好的时间。
设置: Vue CLI应用程序，Vue 2，Vuex 3，Axios，类型记录
高级:我有一个自定义的Axios实例，其中设置了baseURL、拦截器、超时设置等。我正在导入Axios，然后使用axios.create()设置我的信任。
我想从任何组件中使用这个Axios实例，或者像so this.$api.get()那样使用Vuex商店。
现在，我有一个Axios实例的文件：
import Vue from 'vue';
import axios from 'axios';
const $
浏览 1提问于2022-08-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
