vue+element 文件提交(只限Excel)
HTML:
<!-- excel上传 -->
<el-form-item>
<el-upload
class="upload-demo"
ref="upload"
action="#"
:limit="1"
:before-upload="beforeUpload"
:on-change="handleChange"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:file-list="fileList"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary"
>选取文件</el-button
>
<div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
</el-upload>
</el-form-item>
//注意:action是要提交的接口地址,limit限制可上传几个文件
// before-upload 上传文件之前的钩子 on-chang 文件状态改变时的钩子
// on-remove 文件列表移除文件时的钩子 on-exceed 文件超出个数限制时的钩子
// file-list 上传的文件列表 accept 上传文件的类型 auto-upload是否自动上传
JS:
import axios from "@/axios/index";
export default {
name: "messageform",
data() {
return {
form: {
file: "",
},
fileList: [],
}
}
}
},
methods: {
beforeUpload(file) {
let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
let size = file.size / 1024 / 1024;
if (extension !== "xlsx") {
this.$message.warning("只能上传后缀是.xlsx的文件");
}
if (size > 1) {
this.$message.warning("文件大小不得超过1M");
}
},
// 文件状态改变
handleChange(file, fileList) {
if (file) {
this.fileList = fileList.slice(-3);
}
},
// 删除文件
handleRemove(file, fileList) {
this.fileList = [];
},
// 文件超出个数限制
handleExceed(files, fileList) {
this.$message.warning(
`只能选择1个文件,当前共选择了 ${files.length + fileList.length} 个`
);
},
getMessageList() {
if (this.fileList.length === 0) {
this.$message.warning("请点击上传文件,添加文件");
return false;
} else {
this.form.file = this.fileList[0].raw;
this.formData.append("pushTarget", this.form.target);
this.formData.append("file", this.form.file);
}
axios
.request({
url: url,
method: "POST",
data: this.formData,
})
.then((res) => {
this.$message({
message: "推送成功",
type: "success",
});
window.location.reload();
})
.catch((e) => {
this.$message.error("推送失败");
});
},
}
到这里就结束了了!!!