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 
       */constanalysisProxy=(value: any)=>{returnJSON.parse(JSON.stringify(value))}const state =reactive({form:{fileUrl:'',},})// 文件上传前触发consthandleBeforeUpload=(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')returnfalse}// 可以限制图片的大小// if (!isLt1M) {//     this.$message.error('上传图片大小不能超过 1MB!');// }return isJpg || isPng || isJpeg || isPdf
      }// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用consthandleChange=(uploadFile,uploadFiles)=>{
        console.log('文件上传',analysisProxy(uploadFile),uploadFiles)// 文件上传成功之后保存后端返回的路径if(analysisProxy(uploadFile).response){
          state.form.fileUrl =analysisProxy(uploadFile).response.data.imageShowUrl
        }}// 文件预览 此处其实就是点击上传之后的文件名字触发//我这里实现预览也很简答就是把后端返回的路径写在a标签的href属性上consthandlePreview=(uploadFile)=>{
        console.log(analysisProxy(uploadFile))
        state.form.fileUrl =analysisProxy(uploadFile).response.data.imageShowUrl
        console.log('文件地址', state.form.fileUrl)}// 文件超出上传限制 此方法是和:limit绑定的// 我这里是limit=1,也就是限制只能传一个文件，当超出这个                                范围时就会触发这个函数consthandleExceed=(files, uploadFiles)=>{
        console.log('限制上传', files, uploadFiles)
        ElMessageBox.alert('只能上传一个文件，如有需要请删除上一个文件再进行上传','温馨提示',{confirmButtonText:'确定',})}return{...toRefs(state),
        handlePreview,
        handleExceed,
        handleBeforeUpload,
        handleChange,}