vue el-upload 手动上传实现
```vue<el-upload v-model="xlsFile" ref="fileUpload" :limit="1" accept=".xls, .xlsx" action="#" :multiple="false":auto-upload="false" :before-upload="beforeFileUpload" :on-preview="preview" :on-chan
·
```vue
<el-upload v-model="xlsFile" ref="fileUpload" :limit="1" accept=".xls, .xlsx" action="#" :multiple="false"
:auto-upload="false" :before-upload="beforeFileUpload" :on-preview="preview" :on-change="fileChange"
:http-request="uploadHttpRequest" :on-exceed="exceed" :on-remove="fileRemove" :on-success="fileSuccess">
<el-button size="small" type="primary">
导入文件
<i class="el-icon-upload el-icon--right"></i>
</el-button>
<div class="el-upload__tip" style="color: rgba(255, 255, 255, 0.65)" slot="tip">
提示:仅允许上传多1个".xlsx"或者".xls"格式文件,单个文件最大10M
</div>
</el-upload>
<el-button type="primary" @click="submitUpload()">上传</el-button>
script部分
```vue
// 试题导入
beforeFileUpload(file) {
const isFileSizeLimit = file.size / 1024 / 1024 < 10;
if (!isFileSizeLimit) {
this.$message.error("单个图片大小不能超过 10MB!");
}
return isFileSizeLimit;
},
// 文件添加、 上传、 失败
fileChange(file, fileList) {
this.xlsFile = file;
console.log("1111111", this.xlsFile);
},
// 文件上传成功处理
fileSuccess(response, file, fileList) {
// this.openUpload = false;
// this.isUploading = false;
},
// 预览文件
preview(file) {
// this.dialogVisible = true;
},
// 文件超出限制
exceed(files, fileList) {
this.$message.warning(
`当前限制选择 1个文件,本次选择了 ${files.length} 个文件,共选择了 ${
files.length + fileList.length
} 个文件`
);
},
// 移除文件
fileRemove(file, fileList) {
this.xlsFile = null;
},
// 点击上传
submitUpload() {
this.$refs.fileUpload.submit();
},
uploadHttpRequest(param) {
const formData = new FormData(); //FormData对象,添加参数只能通过append('key', value)的形式添加
formData.append("file", this.xlsFile.raw); //添加文件对象
// this.$refs["form"].validate((valid) => {
// if (valid) {
// if (!this.form.id) {
// formData.append("passValue", this.form.passValue);
// formData.append("scoreEvery", this.form.scoreEvery);
// formData.append("testName", this.form.testName);
// } else {
// formData.append("id", this.form.id);
// }
excelData(formData)
.then((res) => {
if (res.code === 200) {
this.msgSuccess("导入成功");
console.log('re====>',res.data)
// this.open = false;
this.getList();
}
})
.catch((err) => {
console.log("失败", err);
param.onError(); //上传失败的文件会从文件列表中删除
});
// }
// });
},
把el-upload里的自动上传auto-upload置为false,然后自定义上传按钮,调用this.$refs.fileUpload.submit();便会触发 :http-request=“uploadHttpRequest”
更多推荐
已为社区贡献1条内容
所有评论(0)