前端el-Upload上传文件/录入文件预览

【前言】在网页中加载PDF是最常见的业务需求，现在市场主流的浏览器基本都支持PDF文件的预览功能，最近开发种就遇到了这种需求，为了解决这个需求在网上找到了好多方法，最常用的有下载pdf.js，和使用elmenetui组建提供的el-Upload上传组件，对比之下使用el-Upload解决文件的上传预览。

1. 文本录入

前端录入文章本质上就是使用富文本编辑器，将富文本编辑器中的内容通过Ajax的方式发送到服务端保存到数据库中，用户预览文章时再通过前端页面展示给用户。

1. 文件上传

文件上传使用elementui组件提供的el-Upload组件进行文件的上传，通过组件内API提供的action绑定上传的url地址（地址需要和后端约定）,其他api参考官方文档即可。

1. 录入文章

录入文章需要准备一个弹层，弹层中用来选择录入文章或者上传文件，这里就使用el-dialog对话框实现文章录入展示，使用el-radio对文本录入和文件上传做标识，后期将唯一标识传递给后端，用来保存文本和预览文件状态。

1. 文件格式限制

自定义文件上传格式限制的思路就是获取文件的后缀名，根据文件后缀名判断是否为可以上传的文件，后续根据业务需求在suffixArray数组中添加文件的后缀名即可，具体实现代码：

//获取文件后缀名
 getFileType (name) {
  let startIndex = name.lastIndexOf('.')
  if (startIndex !== -1) {
    return name.slice(startIndex + 1).toLowerCase()
  } else {
    return ''
  }
},
//文章上传格式控制
beforeUpload (file, fileList) {
  if (file.size / (1024 * 1024) > 500) {
    this.$message.warning('当前文件限制大小不能超过500M')
    return false
  }
  //获取文件后缀名
  let suffix = this.getFileType(file.name)
  let suffixArray = ['pdf', 'docx','doc','xlsx']   //允许上传的文件格式
  if (suffixArray.indexOf(suffix) === -1) {
    this.$message({
      message: '文件格式错误，上传失败',
      type: 'error',
      duration: 2000
    })
    //上传失败删除文件
    this.$refs.uploadPhoto.clearFiles(file)
  }
  return suffixArray
},

1. 文件预览

文件预览需要和后端沟通，将前端定义的文本输入和文件上传标识传递给后端，后端通过唯一标识选择预览文本或者文件，以预览pdf为例，上传文件到服务器后会返回一个Url路径，前端根据Url路径去预览文件，使用iframe标签绑定src属性为文件的Url地址。如图所示：