element-ui自定义同步上传

摘要：主要解决了之前遗留下来的上传不限制文件格式，还有axios封装的组件不支持file上传的问题

<!--主要是accept以及http-request解决了上述问题-->
 <el-form-item label="logo："
                      prop="logo">
          <el-upload class="upload-demo"
                     :action="apiUrl"
                     :headers="headers"
                     accept=".jpg,.png,.jpeg"
                     :on-preview="handlePreview"
                     :on-remove="handleRemove"
                     :on-success="handleSuccess"
                     :before-upload="beforeAvatarUpload"
                     :name="img"
                     :file-list="fileList"
                     :before-remove="beforeRemove"
                     :on-exceed="excedeImage"
                     :limit="1"
                     :http-request="requestFile"
                     list-type="picture">
            <el-button size="small"
                       type="primary">点击上传</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

js部分，只贴部分关键的了

methods: {
	requestFile (param) {
      this.ruleForm.logo = param.file
    },
    // 提交操作 
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) { //表单验证
          this.ladingStatus = true //开启loading
          this.$http({
            url: this.$http.adornUrl('/api/AdminCurrency/addCurrency'),
            method: 'post',
            data: this.$http.adornData(this.ruleForm, true, 'file')
          }).then(({ data }) => {
            this.ladingStatus = false //关闭
            if (data.code == '1') { //添加成功
              this.$message({ //成功提示
                type: 'success',
                message: data.msg
              })
              this.reload()
              this.visible = false
            } else {
              this.$message({ //失败提示
                type: 'error',
                message: data.msg
              })
            }
          })
        } else {
          return false
        }
      })
    }
}

再次优化的axios组件，全部代码在我之前的帖子有，我就不全贴了

/**
 * post请求数据处理
 * @param {*} data 数据对象
 * @param {*} openDefultdata 是否开启默认数据?
 * @param {*} contentType 数据格式
 *  json: 'application/json; charset=utf-8'
 *  form: 'application/x-www-form-urlencoded; charset=utf-8'
 */
http.adornData = (data = {}, openDefultdata = true, contentType = 'text') => {
  // var dataSign = sort_ASCII(JSON.stringify(data))
  var defaults = {
    // 't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  if (contentType === 'file') { // 带文件上传
    var form = new FormData()
    for (var key in data) {
      form.append(key, data[key])
    }
    return form
  }
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}