<template>
<el-form ref="form" label-position="left" :model="form" :rules="rules" label-width="80px" style="margin:20px;width:60%;min-width:600px;">
<el-form-item label="坐標類型" prop="coordinateType">
<el-radio-group v-model="form.coordinateType">
<el-radio label="BD09">百度</el-radio>
<el-radio label="GCJ02">谷歌</el-radio>
<el-radio label="GW84">GW84</el-radio>
<el-radio label="Mercat">墨卡托</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="上傳文件" prop="excelFile">
<el-upload
class="upload-demo"
ref="upload"
:action="uploadUrl()"
name="excelFile"
drag
:data="upData"
:file-list="fileList"
:on-error="uploadFalse"
:on-success="uploadSuccess"
:auto-upload="false"
:before-upload="beforeAvatarUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
<!-- <el-button slot="trigger" size="small" >選取文件</el-button> -->
<div slot="tip" class="el-upload__tip" style="color:red">上傳文件只能是 xls、xlsx、txt 格式!</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitUpload(form)">導入</el-button>
<el-button @click="onCancel(form)">取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
rules: {
coordinateType: [
{ required: true, message: '請選擇文件中的坐標類型', trigger: 'change' }
],
},
form: {
fileName:'',
coordinateType: 'BD09',
},
fileList: [],
}
},
computed: {
// 這里定義上傳文件時攜帶的參數，即表單數據
upData: function() {
return this.form
}
},
methods: {
//導入接口地址
uploadUrl: function() {
return ‘http://172.16.82.63:8080/uploadPath‘ //接口
},
//文件上傳成功觸發
uploadSuccess(response, file, fileList) {
console.log(response)
if(response.code == 0){
this.$message({
message: '導入成功',
type: 'success'
});
}else {
this.$message({
message: '導入失敗',
type: 'error'
});
}
},
//文件上傳失敗觸發
uploadFalse(response, file, fileList) {
this.$message({
message: '文件上傳失敗！',
type: 'error'
});
},
// 上傳前對文件的大小和類型的判斷
beforeAvatarUpload(file) {
this.form.fileName = file.name;
const extension = file.name.split(".")[1] === "xls";
const extension2 = file.name.split(".")[1] === "xlsx";
const extension3 = file.name.split(".")[1] === "txt";
if (!extension && !extension2 && !extension3) {
this.$message({
message: '上傳文件只能是 xls、xlsx、txt 格式!',
type: 'error'
});
}
return extension || extension2 || extension3 ;
},
//表單提交
submitUpload(form) {
this.$refs.form.validate((valid) => {
if (valid) {
//觸發組件的action
this.$refs.upload.submit();
} else {
console.log('error submit!!');
return false;
}
});
},
//表單取消
onCancel(form){
this.$refs.form.resetFields();
}
}
}
</script>