要
实现Vue + Axios +
El-
upload进行
文件上传并跨域，需要按照以下步骤进行操作：
1. 在
Vue项目中安装axios和
element-ui。在命令行中输入以下命令即可安装：
```
npm install axios
element-ui --save
```
2. 在
Vue项目中创建一个上传
文件的组件，例如File
Upload.
vue。在该组件中导入axios和
element-ui，并且引入
El-
upload组件。示例代码如下：
```
vue
<template>
<div>
<
el-
upload
class="
upload-demo"
:action="
uploadUrl"
:on-success="handle
UploadSuccess"
:before-
upload="before
Upload"
:headers="headers"
:data="formData"
:file-list="fil
eList">
<
el-button size="small" type="primary">点击上传</
el-button>
</
el-
upload>
</div>
</template>
<script>
import axios from 'axios'
import { Message } from '
element-ui'
export default {
name: 'File
Upload',
data () {
return {
fil
eList: [],
uploadUrl: 'http://example.com/
upload',
formData: {},
headers: {
'Content-Type': 'multipart/form-data'
}
}
},
methods: {
handle
UploadSuccess (response, file, fil
eList) {
// 上传成功后的处理逻辑
console.log(response)
},
before
Upload (file) {
//
文件上传前的处理逻辑
console.log(file)
}
}
}
</script>
```
3. 在组件中
实现文件上传的逻辑。在上传
文件之前，需要设置请求头和请求数据，并且需要处理跨域请求。可以在组件的methods中定义一个
upload方法，用来发送上传请求。示例代码如下：
```
vue
<script>
import axios from 'axios'
import { Message } from '
element-ui'
export default {
name: 'File
Upload',
data () {
return {
fil
eList: [],
uploadUrl: 'http://example.com/
upload',
formData: {},
headers: {
'Content-Type': 'multipart/form-data'
}
}
},
methods: {
handle
UploadSuccess (response, file, fil
eList) {
// 上传成功后的处理逻辑
console.log(response)
},
before
Upload (file) {
//
文件上传前的处理逻辑
console.log(file)
},
upload () {
let config = {
headers: this.headers,
withCredentials: true // 跨域请求需要设置withCredentials为true
}
let data = new FormData()
data.append('file', this.fil
eList[0].raw)
// 向后端发送上传请求
axios.post(this.
uploadUrl, data, config)
.then(response => {
this.handle
UploadSuccess(response)
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
```
4. 最后，在
Vue组件中使用
El-
upload组件，并且调用
upload方法即可
实现文件上传。示例代码如下：
```
vue
<template>
<div>
<
el-
upload
class="
upload-demo"
:action="
uploadUrl"
:on-success="handle
UploadSuccess"
:before-
upload="before
Upload"
:headers="headers"
:data="formData"
:file-list="fil
eList">
<
el-button size="small" type="primary" @click="
upload">点击上传</
el-button>
</
el-
upload>
</div>
</template>
<script>
import axios from 'axios'
import { Message } from '
element-ui'
export default {
name: 'File
Upload',
data () {
return {
fil
eList: [],
uploadUrl: 'http://example.com/
upload',
formData: {},
headers: {
'Content-Type': 'multipart/form-data'
}
}
},
methods: {
handle
UploadSuccess (response, file, fil
eList) {
// 上传成功后的处理逻辑
console.log(response)
},
before
Upload (file) {
//
文件上传前的处理逻辑
console.log(file)
},
upload () {
let config = {
headers: this.headers,
withCredentials: true // 跨域请求需要设置withCredentials为true
}
let data = new FormData()
data.append('file', this.fil
eList[0].raw)
// 向后端发送上传请求
axios.post(this.
uploadUrl, data, config)
.then(response => {
this.handle
UploadSuccess(response)
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
```
该博客详细介绍了如何利用Vue.js结合Element UI库，分别实现单文件和多文件的上传功能，包括具体步骤和关键配置。
最低0.47元/天 解锁文章
扫一扫
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
