el-upload this.fileList拿不到文件
时间: 2024-05-05 17:21:30 浏览: 8
如果您在使用 ElementUI 中的 el-upload 组件时无法获取到上传的文件,请确保您已经正确设置了 el-upload 组件的属性和事件。
首先,您需要设置 el-upload 的属性 `action`,该属性指定文件上传的地址。例如:
```html
<el-upload
class="upload-demo"
action="/your-upload-url"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button type="success" v-if="showBtn">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
其中,`:on-success` 属性指定了上传成功后的回调函数,`:before-upload` 属性指定了上传前的回调函数。
接着,您需要在 Vue 实例中定义 `handleSuccess` 和 `beforeUpload` 方法,以处理上传成功和上传前的操作。例如:
```javascript
export default {
data() {
return {
fileList: []
}
},
methods: {
handleSuccess(response, file, fileList) {
console.log(response, file, fileList)
},
beforeUpload(file) {
console.log(file)
this.fileList.push(file)
}
}
}
```
在 `handleSuccess` 事件回调函数中,您可以获取到上传成功后服务器返回的响应数据、上传的文件对象和上传文件列表。在 `beforeUpload` 事件回调函数中,您可以获取到当前上传的文件对象,并将其添加到文件列表中。
如果您仍然无法获取到上传的文件,请检查您的代码是否存在其他问题,例如文件上传的地址是否正确、上传组件是否正确绑定了事件等。