记录Vue项目中使用element-ui上传图片组件

一、项目背景

公司接手某车企问卷中台项目，涉及题库管理、问卷管理和个人中心三部分模块。

题库管理模块包含创建试题（单选、多选、排序、矩阵单选、矩阵多选、填空、打分）七种选择，弹框内置试题样式以及预览样式。

问卷管理模块属于创建问卷将试题内置进去的功能模块。在新增一个问卷的过程中，需要配置问卷的基础信息例如问卷名称、问卷描述、选择所属业务、选择问卷上传图片、设置发送方式默认为二维码。所选信息配置完成之后即可对问卷添加试题，添加方式有两种一是可以从题库中抽取试题，二是可以重新创建新题型进行增加。在新增试题后的问卷中可以对试题进行上移、下移、题目跳转逻辑和题目乱序设置。设置好的问卷需要进行发布方可对其进行答题，答题方式为url链接访问和手机扫描二维码访问两种模式。

个人中心页面属于对问卷回答后的数据统计页面，内置了echarts统计图表和table表格对数据进行分类。

二、记录i

本次记录项目中涉及到的图片上传功能 fileReader为js内置对象 

<el-upload
  accept=".jpg, .jpeg, .JPG, .JPEG, .png, .gif"
  class="more-avatar-uploader"
  :action="upload_url"
  :auto-upload="true"
  :data="{name: 'resourceUrls'}"
  :show-file-list="false"
  :before-upload="beforeAvatarUploadImage"
  :http-request="httpRequest"
>
  <el-button class="addOption_image" title="新增图片">
    新增图片
  </el-button>
</el-upload>


data中定义upload_url为空即可
upload_url：'',
fileReader: ''

mounted的默认执行一次
mounted() {
  this.fileReader = new FileReader()
}

methods中定义方法
beforeAvatarUploadImage (file) {
  const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif')
  const isLt2M = file.size / 1024 / 1024 < 10
  if (!isJPG) {
    this.$message.error('上传图片只能是 JPG, PNG, GIF 格式')
  }
  if (!isLt2M) {
    this.$message.error('上传图片大小不能超过 10MB')
  }
  return isJPG && isLt2M
},

httpRequest (options) {
  let file = options.file
  if (file) {
    this.fileReader.readAsDataURL(file)
  }
  this.fileReader.onload = () => {
    let base64Str = this.fileReader.result
    this.base64Content = base64Str.split(',')[1]
    const data = {
      file: base64Str.split(',')[1],
      fileType: file.name.substr(file.name.lastIndexOf('.') + 1)
    }
    uploadFile(data).then(response => {
      const data = response.data
      if (data.success) {
        if (options.data.name === 'resourceUrls') {
          this.questionData.questionChoise.resourceUrls = data.data
        } else if (options.data.name === 'videoUrls') {
          this.questionData.questionChoise.videoUrls = data.data
        } else if (options.data.name === 'optionImgs') {
          this.setOptionsImage(options.data.imageIndex, data.data)
        }
        Message.success('上传成功')
      } else {
        Message.error(data.message)
      }
    }).catch(error => {
      console.log('-----' + error)
    })
  }
}