vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件

vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件

效果如图

直接看代码吧
template部分

    <div class="file-upload">
      <el-upload
        accept=".pdf,image/jpg,image/jpeg,image/png" // 限制文件类型，加上这个属性，当用户选中文件时只展示此处所类型所包含的文件。比如我这里就只展示上面三种图片格式和Pdf，像word和ppt等就不会展示了
        :action="xxxxxxxxx" // 后端上传文件接口地址
        :before-upload="handleBeforeUpload" // 文件上传前触发
        class="upload-demo"
        :limit="1" // 限制能上传的文件个数
        :on-change="handleChange" // 文件上传状态改变就会触发，添加文件，上传成功，长传失败都会触发
        :on-exceed="handleExceed" // 超出limit限制就会触发
        :on-preview="handlePreview" // 点击上产之后的文件触发
      >
        <el-button type="primary">附件上传</el-button>
        <template #tip>
          <div class="el-upload__tip">
            只能上传一个图片或pdf格式的文件
          </div>
        </template>
      </el-upload>
      <el-button v-if="form.fileUrl" type="primary">
        <a class="file-upload-link" :href="form.fileUrl" target="_blank">预览</a>
      </el-button>
    </div>

css部分

 .file-upload {
    display: flex;
    justify-content: space-between;
    .file-upload-link {
      color: white;
    }
    .file-upload-link:visited {
      color: white;
    }
  }
  .el-upload__tip {
    color: red;
  }

js部分

       /**
          * @description 解析proxy数据为普通数据
          * @param value 
       */
       const analysisProxy = (value: any) => {
          return JSON.parse(JSON.stringify(value))
       }

       const state = reactive({
          form: {
            fileUrl: '',
          },
        })

      // 文件上传前触发
      const handleBeforeUpload = (file) => {
        // 拿到文件后缀名
        const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
        console.log('文件上传类型', fileType)
        // 当然拉我的需求是只需要图片和pdf，大家有需要可以在此处扩展
        const isJpg = fileType === 'jpg'
        const isPng = fileType === 'png'
        const isJpeg = fileType === 'jpeg'
        const isPdf = fileType === 'pdf'
        // const isLt1M = file.size / 1024 / 1024 < 1;
        // 根据后缀名判断文件类型
        if (!isJpg && !isPng && !isJpeg && !isPdf) {
            $baseMessage('只能上传图片和pdf格式的文件！', 'error', 'vab-hey-message-error')
            return false
        }
        // 可以限制图片的大小
        // if (!isLt1M) {
        //     this.$message.error('上传图片大小不能超过 1MB!');
        // }
        return isJpg || isPng || isJpeg || isPdf
      }

	 // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      const handleChange =(uploadFile,uploadFiles) => {
        console.log('文件上传', analysisProxy(uploadFile),uploadFiles)
        // 文件上传成功之后保存后端返回的路径
        if (analysisProxy(uploadFile).response) {
          state.form.fileUrl = analysisProxy(uploadFile).response.data.imageShowUrl
        }
      }

      // 文件预览 此处其实就是点击上传之后的文件名字触发
      //我这里实现预览也很简答就是把后端返回的路径写在a标签的href属性上
      const handlePreview = (uploadFile) => {
        console.log( analysisProxy(uploadFile))
        state.form.fileUrl = analysisProxy(uploadFile).response.data.imageShowUrl
        console.log('文件地址', state.form.fileUrl)
      }

      // 文件超出上传限制 此方法是和:limit绑定的
      // 我这里是limit=1,也就是限制只能传一个文件，当超出这个                                范围时就会触发这个函数
      const handleExceed = (files, uploadFiles) => {
        console.log('限制上传', files, uploadFiles)
        ElMessageBox.alert('只能上传一个文件，如有需要请删除上一个文件再进行上传', '温馨提示', {
          confirmButtonText: '确定',
        })
      }
      
      return {
        ...toRefs(state),
        handlePreview,
        handleExceed,
        handleBeforeUpload,
        handleChange,
      }