vue web端不使用el-upload上传文件封装
时间: 2024-05-24 19:08:59 浏览: 10
在Vue的web端,如果不想使用`el-upload`组件上传文件,可以通过以下方式进行封装:
1. 在HTML中添加一个`input`标签,通过该标签选择文件并获取文件路径。
2. 通过Vue的`data`属性绑定该标签的值,并在`methods`中添加一个函数,用于处理上传文件。
3. 在该函数中,使用`FormData`对象将文件数据进行封装,并使用`axios`库进行上传操作。
以下是一个简单的示例代码:
```
<template>
<div>
<input type="file" ref="fileInput" @change="handleUpload">
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: ''
}
},
methods: {
handleUpload() {
const file = this.$refs.fileInput.files;
const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData)
.then(res => {
console.log(res);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)