【vue】使用 el-upload+axis实现手动多文件上传的代码实现

代码实现

以下是一个使用Element UI的el-upload和Axios实现手动多文件上传的示例代码：

<template><div><el-uploadref="upload"action="/upload":auto-upload="false":on-change="handleUploadChange":file-list="fileList"multiple><el-button size="small" type="primary">选择文件</el-button></el-upload><el-button size="small" type="success" @click="uploadFiles">上传文件</el-button></div>
</template><script>
import axios from 'axios'export default {data() {return {fileList: []}},methods: {handleUploadChange(file, fileList) {this.fileList = fileList},uploadFiles() {const formData = new FormData()for (let i = 0; i < this.fileList.length; i++) {formData.append('file', this.fileList[i].raw)}axios.post('/upload', formData).then(response => {console.log(response.data)}).catch(error => {console.error(error)})}}
}
</script>

说明

在上面的代码中，我们首先使用el-upload组件创建了一个文件上传输入框，并设置multiple属性以允许用户选择多个文件。接着，在按钮上添加了一个@click事件处理程序，用于在用户选择文件后手动触发上传操作。

在uploadFiles()方法中，我们首先创建了一个FormData对象，并将所有要上传的文件添加到该对象中。然后，我们使用Axios发送一个POST请求，将FormData对象作为第二个参数传递给该方法。当服务器返回响应时，我们可以在.then回调函数中访问响应数据。如果发生错误，则可以在.catch回调函数中访问错误信息。

需要注意的是，在上传文件之前，我们必须先将文件添加到FormData对象中，这里使用了this.fileList[i].raw来获取每个要上传的文件的原始数据。另外，由于我们将自动上传(auto-upload)属性设置为false，因此需要通过handleUploadChange()方法将选择的文件列表保存到组件状态中(fileList)。