项目中要求上传的文件二选一即可,上传的同时携带其他参数
- 设置auto-upload为"false"取消自动上传
- 在data属性里携带其他参数,action是上传文件用到的接口
- 文件二选一,我使用的方法是放一个假的上传文件按钮。当选择了文件A的时候,B文件的上传按钮移除,提供一个假的按钮,状态为禁用
- 获取el-upload的实例对象,点击保存按钮时,调用Element UI提供的submit方法,就可以在点击保存的时候上传文件
代码如下
<el-form ref="ruleFormRef" class="plain-wrap" :model="form" :rules="rules">
<el-form-item label="方案名称" prop="file_name">
<el-input
placeholder="填写方案名称"
v-model="form.file_name"
></el-input>
</el-form-item>
<el-form-item label="方案计算" prop="data">
<div class="plain-wrap__item">
<div class="plain-wrap__alert">
(文件上传二选一,提供计算文件或完整出率文件)
</div>
<div class="plain-wrap__upload">
<div class="plain-wrap__upload__template">
<span class="label">① 计算文件</span>
<el-button
type="primary"
link
size="small"
@click="handleGetTemplate"
>模板</el-button
>
</div>
<el-upload
v-if="isComputed"
ref="computedUploadRef"
name="data"
:data="{
file_name: form.file_name,
data_id: RateFileType.COMPUTED
}"
:limit="1"
:auto-upload="false"
:headers="{ token: storage.get(StorageEnum.ACCESS_TOKEN) }"
:on-exceed="handleExceed"
:on-change="handleComputedChange"
:on-remove="handleRemoveFile"
:on-success="handleSuccess"
:on-error="handleErroe"
:before-upload="handleBeforeUpload"
:action="`${baseUrl}/xxx`"
>
<el-button type="primary">上传文件</el-button>
</el-upload>
<el-button v-else type="primary" :disabled="!isComputed"
>上传文件</el-button
>
</div>
<div class="plain-wrap__upload">
<div class="plain-wrap__upload__template">
<span class="label">② 出率文件</span>
<el-button
type="primary"
link
size="small"
@click="handleGetTemplate"
>模板</el-button
>
</div>
<el-upload
v-if="isRate"
ref="rateUploadRef"
name="data"
:data="{
file_name: form.file_name,
data_id: RateFileType.RATE
}"
:limit="1"
:auto-upload="false"
:headers="{ token: storage.get(StorageEnum.ACCESS_TOKEN) }"
:on-exceed="handleExceed"
:on-change="handleRateChange"
:on-remove="handleRemoveFile"
:on-success="handleSuccess"
:on-error="handleErroe"
:before-upload="handleBeforeUpload"
:action="`${baseUrl}/xxx`"
>
<el-button type="primary" :disabled="!isRate">上传文件</el-button>
</el-upload>
<el-button v-else type="primary" :disabled="!isRate"
>上传文件</el-button
>
</div>
</div>
</el-form-item>
</el-form>
<div>
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { storage } from "@/utils/storage";
import { StorageEnum } from "@/enums/storage";
import { UploadRawFile, UploadFile, ElMessageBox } from "element-plus";
import { RateFileType } from "@/enums/card-pool";
const router = useRouter();
const baseUrl = import.meta.env.VITE_REQUEST_URL;
const form = reactive<AnyObject>({});
const rules = reactive<FormRules>({
file_name: [{ required: true, message: "请输入方案名称", trigger: "blur" }],
data: [{ required: true, message: "请上传相应文件", trigger: "change" }]
});
const isComputed = ref(true);
const isRate = ref(true);
const handleExceed = () => {
ElMessage.error("文件数量超出限制");
};
const handleSuccess = () => {
ElMessage.success("添加成功");
router.push("/xxx");
};
// 上传计算文件时,移除出率文件的上传按钮
const handleComputedChange = (file: UploadFile) => {
form.data = file.raw;
isRate.value = false;
};
// 上传出率文件时,移除计算文件的上传按钮
const handleRateChange = (file: UploadFile) => {
form.data = file.raw;
isComputed.value = false;
};
// 移除文件时,将两个按钮的状态初始化
const handleRemoveFile = () => {
isComputed.value = true;
isRate.value = true;
form.data = null;
};
const handleErroe = (error: Error) => {
const err = JSON.parse(error.message);
ElMessage.error(err.msg || "添加失败");
};
const handleBeforeUpload = async (file: UploadRawFile) => {
let acceptList = ["xlsx", "xls"];
let fileType = (file.name.split(".").pop() || "").toLowerCase();
if (acceptList.indexOf(fileType) === -1) {
ElMessage.error("仅支持xlsx、xls文件");
return false;
}
};
const handleGetTemplate = () => {
ElMessageBox.alert(
"【金山文档】 xx相关文件模板https://xxxxxxxxxxxxx"
);
};
const handleCancel = () => {
router.back();
};
const ruleFormRef = ref<FormInstance>();
const computedUploadRef = ref();
const rateUploadRef = ref();
const handleSave = () => {
if (!ruleFormRef.value) return;
ruleFormRef.value.validate((valid) => {
if (valid) {
isComputed.value
? computedUploadRef.value.submit()
: rateUploadRef.value.submit();
}
});
};