上传文件（vue3）

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

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

<template>
  <el-dialog top="48px" width="500" title="新增协议" :modelValue="visible" @close="handleClose()">
    <div class="form-main">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="90px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item
          label="协议名称: "
          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-item
          label="协议文件: "
          prop="fileUrl"
          :rules="{
            required: true,
            message: '请选择协议文件',
            trigger: 'blur'
          }"
        >
          <div>
            <el-upload
              ref="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) return
  await 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 < 10
  if (!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.relativePath
      nextTick(() => {
        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)
  }