http-request:覆盖默认的上传行为,可以实现自定义上传
on-exceed:文件超出个数限制时的钩子
<el-upload class='image-uploader' :multiple='false' :auto-upload='true' list-type='text' :show-file-list='true'
:before-upload="beforeUpload" :drag='true' action='' :limit="1" :on-exceed="handleExceed"
:http-request="uploadFile">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">一次只能上传一个文件,仅限text格式,单文件不超过1MB</div>
</el-upload>
// 上传文件之前的钩子
beforeUpload(file) {
//判断文件格式
let hz = file.name.split(".")[1]
if (hz != 'xlsx' && hz != 'xls') {
return false;
}
},
// 上传文件个数超过定义的数量
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传`)
},
// 上传文件
uploadFile(item) {
let fileObj = item.file
const form = new FormData()// FormData 对象
form.append('upload', fileObj)// 文件对象 'upload'是后台接收的参数名
$.ajax({
url: "http://",
data: form,
type: "POST",
contentType: "multipart/form-data",
processData: false, //告诉jquery不要对form进行处理
contentType: false, //指定为false才能形成正确的Content-Type
success: function (res) {}
})
}
如果是axios的话。
uploadFile(item) {
let fileObj = item.file;
console.log(fileObj);
const form = new FormData(); // FormData 对象
form.append('sexcel', fileObj); // 文件对象 'upload'是后台接收的参数名
this.$http.post('/passengerTraffic-admin/pc/importApi/importStation', form).then((res) => {
if (res.data.code == 1) {
this.$message.success(res.data.msg);
this.upload = false;
this.$refs.upload.clearFiles();
this.getCList();
} else {
this.$message.error(res.data.msg);
}
});
}