本教程详细介绍了如何在Vue项目中集成Element UI的Upload组件，并通过该组件将文件上传至服务器。
在Vue.js项目中使用Element UI库的``组件可以实现文件上传功能，并且可以在上传之前进行校验以及发送请求给后端服务器。
### 1. before-upload属性
该属性允许我们在实际执行文件上传操作前对文件进行预处理和验证。例如，以下代码展示了如何检查一个JPG格式的图片是否大小不超过2MB：
```javascript
...
methods: {
beforeUpload(file) {
const isJPG = file.type === image/jpeg;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error(上传头像图片只能是 JPG 格式!);
}
if (!isLt2M) {
this.$message.error(上传头像图片大小不能超过 2MB!);
}
return isJPG && isLt2M;
},
}
```
### 2. 文件传输格式与action属性
``组件的`action`属性用于指定文件上传的目标URL。在实际项目中，这个值应该指向后端服务器上的一个API接口以处理接收到的文件数据。
```javascript
let formData = new FormData();
formData.append(file, file);
axios.post(http://127.0.0.1:8083/picupload, formData)
.then(response => {
this.enclosure.openPermitimgUrl = response.data;
console.log(response);
})
.catch(error => {
alert(上传失败);
console.log(error);
});
```
这里使用`axios`库发起POST请求，将文件作为二进制数据（文件流）传输到服务器端。
### 3. 实现上传导入功能
除了简单的文件上传之外，还可以利用``组件处理更复杂的场景如文件导入。通过监听`on-success`事件可以实现：
```javascript
...
methods: {
handleSuccess(response, file) {
axios.post(http://127.0.0.1:8083/import, { importedFileId: response.fileId })
.then(importResponse => {
console.log(importResponse);
...
})
.catch(importError => {
console.error(importError);
...
});
},
}
```
在`handleSuccess`方法中，我们获取到上传成功的响应，并使用该信息调用后台的导入接口。
### 4. 处理多文件上传
如果需要支持多个文件同时上传，则可以在组件上设置`multiple=true`属性。此外还需要定义一个数组来存储所有已上传的文件信息：
```javascript
data() {
return {
uploadedFiles: []
};
},
methods: {
handleSuccess(response, file) {
this.uploadedFiles.push({ fileId: response.fileId, fileName: file.name });
...
},
}
```
这样，`uploadedFiles`数组可以用来追踪已经成功上传的所有文件，并且可以在必要时将这些信息传递给后台接口进行进一步处理。
通过上述方法和属性的配置，我们可以利用Vue.js与Element UI库构建出安全、高效的文件上传功能。
5星
