element上传文件暂存
时间: 2023-07-27 10:09:11 浏览: 60
您可以使用以下代码实现文件上传暂存:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/your-upload-api"
:auto-upload="false"
:on-change="handleChange"
:file-list="fileList"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button
style="margin-left: 10px;"
size="small"
type="success"
:disabled="!fileList.length"
@click="submitUpload"
>
上传到暂存
</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
};
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList.slice(-1);
},
submitUpload() {
const formData = new FormData();
formData.append("file", this.fileList[0].raw);
// 将文件上传到暂存
// your api code here
},
},
};
</script>
```
这里使用了 Element UI 的 Upload 组件,设置 `auto-upload="false"` 以禁用自动上传,文件选择后点击“上传到暂存”按钮触发 `submitUpload` 方法,将选择的文件通过 FormData 对象上传到暂存。您需要将 `action` 属性设置为您的上传 API 地址,并在上传成功后执行相应的后续操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)