sl-sfy-safety/src/views/comp/upload/index.vue

<template>
  <PageWrapper title="上传图片" content="上传图片，用于向用户收集图片信息">
    <el-card shadow="never" :bordered="false" class="mt-3 proCard">
      <el-row :gutter="20" justify="center">
        <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
          <el-form
            :label-width="80"
            :model="formValue"
            :rules="rules"
            label-placement="left"
            ref="formRef"
            class="py-8"
          >
            <el-form-item label="预约姓名" prop="name">
              <el-input v-model="formValue.name" placeholder="输入姓名" />
            </el-form-item>
            <el-form-item label="预约号码" prop="mobile">
              <el-input placeholder="电话号码" v-model="formValue.mobile" />
            </el-form-item>

            <el-form-item label="病例图片" prop="images">
              <BasicUpload
                :action="`${uploadUrl}/api/admin/upload`"
                :headers="uploadHeaders"
                :data="{ type: 0 }"
                v-model:list="fileList"
                :limit="1"
                @upload-change="uploadChange"
                helpText="单个文件不超过2MB，最多只能上传10个文件"
              />
            </el-form-item>
            <el-form-item>
              <el-space>
                <el-button type="primary" @click="formSubmit">提交预约</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-space>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, unref, reactive } from 'vue';
  import { ElMessage } from 'element-plus';
  import { BasicUpload } from '@/components/Upload';
  import { useGlobSetting } from '@/hooks/setting';
  import { FormRules } from 'element-plus';

  const globSetting = useGlobSetting();

  const rules: FormRules = {
    name: {
      required: true,
      message: '请输入预约姓名',
      trigger: 'blur',
    },
    remark: {
      required: true,
      message: '请输入预约备注',
      trigger: 'blur',
    },
    images: {
      required: true,
      type: 'array',
      message: '请上传病例图片',
      trigger: 'change',
    },
  };

  const formRef: any = ref(null);

  const { uploadUrl } = globSetting;

  const fileList = ref([
    // {
    //   name: 'food.jpeg',
    //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    // },
    // {
    //   name: 'food2.jpeg',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    // },
  ]);

  const formValue = reactive({
    name: '',
    mobile: '',
    //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
    images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
  });

  const uploadHeaders = reactive({
    authorization: 'Bearer Mvixk4yW3Mes8IJykW30BBJFI0c71233ZqG8PBWT',
  });

  function formSubmit() {
    formRef.value.validate((errors) => {
      if (!errors) {
        ElMessage.success('验证成功');
      } else {
        ElMessage.error('验证成功');
      }
    });
  }

  function resetForm() {
    formRef.value.restoreValidation();
  }

  function uploadChange(list: string[]) {
    console.log('🚀 ~ file: index.vue ~ line 118 ~ uploadChange ~ list', list);
    formValue.images = unref(list);
  }
</script>