上传文件（vue3）

使用el-upload  先上传到文件服务器，生成url

然后点击确定按钮： 保存数据 

<template><el-dialog top="48px" width="500" title="新增协议" :modelValue="visible" @close="handleClose()"><div class="form-main"><el-formref="ruleFormRef":model="ruleForm"label-width="90px"class="demo-ruleForm"status-icon><el-form-itemlabel="协议名称: "prop="agreementName":rules="[{required: true,message: '请输入协议名称',trigger: 'blur'},{message: '最多20个字符',trigger: 'blur',max: 20}]"><el-input v-model="ruleForm.agreementName" placeholder="请输入协议名称" /></el-form-item><el-form-itemlabel="协议文件: "prop="fileUrl":rules="{required: true,message: '请选择协议文件',trigger: 'blur'}"><div><el-uploadref="uploadRef"class="upload-demo":on-change="beforeUpload":auto-upload="false":show-file-list="false"><template #trigger><div class="upBtn">{{ fileName == "" ? "协议文件" : fileName }}</div></template><div class="div-desc">支持上传pdf文件</div></el-upload></div></el-form-item></el-form></div><template #footer><el-button @click="handleClose()">取消</el-button><el-button type="primary" @click="confirm(ruleFormRef)">确定</el-button></template></el-dialog>
</template><script setup lang="ts">
import type { FormInstance } from "element-plus"
import { addAgreementManage } from "@/api/agreementManage"
import { uploadFile } from "@/api/common"
import { uploadCodeStr } from "@/types/common"
defineProps({visible: {type: Boolean,default: false}
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({agreementName: "",fileUrl: ""
}) as any
const emits = defineEmits(["closeDialog"])
const handleClose = (getData?: any) => {ruleForm.value = {agreementName: "",fileUrl: ""}fileName.value = ""nextTick(() => {ruleFormRef.value?.resetFields()})emits("closeDialog", getData ? true : false)
}
// 确定按钮
const confirm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {addAgreementManage({agreementName: ruleForm.value.agreementName,fileUrl: ruleForm.value.fileUrl}).then((res: any) => {if (res.code == 200) {ElMessage.success(res.msg)handleClose(true)} else {ElMessage.error(res.msg)}})} else {console.log("error submit!", fields)}})
}
// 上传文件
const beforeUpload = (file: any) => {// 判断文件类型const isPDF = file.raw.type === "application/pdf"if (!isPDF) {ElMessage.error("上传文件只能是 PDF 格式!")return}const isLt2M = file.size / 1024 / 1024 < 10if (!isLt2M) {ElMessage.error("上传文件大小不能超过 10MB!")return}upload(file)
}
let fileName = ref("")
// 上传文件
const upload = async (file: any) => {try {let { code, data } = await uploadFile({multipartFile: file.raw,code: uploadCodeStr})if (code && code == 200) {ruleForm.value.fileUrl = data.relativePathnextTick(() => {ruleFormRef.value?.validate()})fileName.value = file.raw.name} else {ElMessage.error("上传失败")}} catch (error) {// ElMessage.error("上传失败")}
}
</script><style scoped lang="scss">
.form-main {.upBtn {color: #409eff;cursor: pointer;}
}
.div-desc {width: 100%;color: #909399;font-size: 12px;margin-top: -10px;
}
</style>

二 查看协议

因为是个URL 直接打开就可以

  /*** 预览协议*/const goPreview = (row: any) => {//新页面打开window.open(row.fileUrl)// window.open(configLlocation.filePathUrl + row.fileUrl)}