vue +element实现文件上传

要实现Vue Element的文件上传，可以使用ElUpload组件。在模板中添加一个el-upload标签，并设置相关属性，如ref、:file-list、:auto-upload、:on-change、:limit、drag、action和accept。其中，ref用于在代码中获取上传组件的实例，:file-list绑定文件列表，:auto-upload设置为false表示手动触发上传，:on-change绑定一个方法来处理文件改变事件，:limit设置最大可选文件数量，drag表示是否启用拖拽上传，action为后台接口的URL，accept用于指定接受上传的文件类型。

在methods中，可以定义一些方法来处理文件的操作。例如，handleRemove用于移除文件，handlePreview用于预览文件，handleExceed用于处理超出文件数量限制的情况，beforeRemove用于确认是否移除文件。另外，可以定义submit方法来处理文件上传操作。在该方法中，可以创建一个FormData对象，将文件列表中的文件添加到FormData中，然后调用上传文件的API发送请求。在文件状态改变时的钩子函数OnChange中，可以更新文件列表。

示例代码如下：
<el-upload class="upload-demo" ref="upload" :file-list="fileEditList" :auto-upload="false" :on-change="uploadEditFile" :limit="1" drag action accept=".kmz">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip" style="display: table-cell; color: gray">只能上传.kmz文件</div>
</el-upload>

methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length fileList.length } 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
submit() {
var newFile = new FormData();
this.fileList.forEach((item, index) => {
newFile.append("file", item.raw);
})
uploadFilePort(newFile).then(
(res) => {
console.log("文件上传res", res);
if (res.data.code == 200) {
this.$message({ message: "添加成功！！", type: "success" });
}
},
(err) => {
this.$message.error(err);
}
);
},
OnChange(file, fileList) {
console.log("OnChange-fileList", file, fileList);
this.fileList = fileList;
},
},