实现input上传附件功能

实现使用实现input上传pdf格式文件

1.业务场景分析： 实现一排小窗格，用户可以上传的类型为图片或者pdf，上传后要在有预览图片，点击图片可以放大预览，点击文件可以跳转pdf阅读。

2.实现：

1.设置input的accept属性

<input
      type="file"
      accept="image/*,application/pdf"
      hidden
      ref="fileRef"
      @change="onFileChange()"
/>

image/*,application/pdf支持所有的图片格式和pdf格式文件上传 hidden该输入框隐藏，通过点击其他事件触发，这里和ref="fileRef"搭配使用，在对应的上传函数里，通过ref属性调用input的click事件

    const uploadFile = () => {
      state.fileRef.click()
    }

2.使用el-image实现图片预览

<el-image
        class="img"
        :src="item.mimeType === 'application/pdf' ? pdfimg : item.downloadUrl"
        :preview-src-list="
          item.mimeType === 'application/pdf' ? [] : [item.downloadUrl]
        "
        fit="cover"
        @click="item.mimeType === 'application/pdf' ? showPdf(images) : null"
></el-image>

利用文件的mimetype属性判断文件类型，对于路径，pdf格式是用一个文件图(这里也可以下载插件显示pdf的内容截图，但是我没做） :preview-src-list=" item.mimeType === 'application/pdf' ? [] : [item.downloadUrl] "这是一个el自带的预览图的属性，它的值是预览图的路径的数组。showPdf(images)是自定义的pdf预览函数。

const showPdf = (v) => {
      v.forEach((item) => {
        if (item.mimeType === 'application/pdf') {
          window.open(item.previewUrl)
        }
      })
    }

图片列表渲染用的是v-for，这里在获取图片列表的时候有个坑。

const imagePreview = computed(() => {
      return function (v) {
        return v
          .filter((item) => item.mimeType !== 'application/pdf')
          .map((item) => item.downloadUrl)
      }
    })

需要过滤然后遍历，如果不过滤，pdf文件的downloadUrl是无法预览的。