el-upload获取文件流
时间: 2023-11-17 17:01:49 浏览: 95
el-upload是一个Vue组件,用于上传文件。它可以通过设置http-request属性来指定上传文件的请求方法。在提供的引用中,http-request属性被设置为一个函数,该函数使用FormData对象将文件流作为参数进行上传。具体来说,可以通过以下步骤获取文件流:
1. 在el-upload组件中设置ref属性,例如:ref="upload"
2. 在上传文件的方法中,通过this.$refs.upload.uploadFiles()方法获取上传的文件列表
3. 遍历文件列表,使用FormData对象将每个文件转换为文件流,并将其作为参数传递给上传文件的请求方法
下面是一个示例代码,用于演示如何获取文件流:
```javascript
<template>
<el-upload
ref="upload"
class="upload-demo"
:action="uploadUrl"
:http-request="uploadFile"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
import http from '@/utils/https.js'
import { ElMessage } from 'element-plus';
export default {
data() {
return {
uploadUrl: '/api/upload',
fileList: []
}
},
methods: {
uploadFile(params) {
let formData = new FormData();
formData.append("file", params.file);
return http.fileUpload(this.uploadUrl, formData);
},
handleSuccess(response, file, fileList) {
ElMessage.success('上传成功!');
},
handleError(error, file, fileList) {
ElMessage.error('上传失败!');
},
submitUpload() {
this.$refs.upload.uploadFiles();
}
}
}
</script>
```