Vue的formData图片上传

import Vue from 'vue'

/**
 * 图片上传
 * 已注入所有Vue实例，
 * template模板里调用 $uploadFile(id)
 * 组件方法里调用 this.$uploadFile(id)
 */
const uploadFile = (id) => {
  let promise = new Promise((resolve, reject) => {
    let file = null
    let el = null
    let i = 0
    let formData = new FormData()
    document.getElementById(id).click()
    el = document.getElementById(id)
    el.addEventListener('change', function (e) {
      i++
      if (i !== 1) {
        return false
      } else {
        file = this.files[0]
        formData.append('file', file)
        formData.append('fileType', 'IMAGE')
        // 数据请求
        Vue.axiosfrom(Vue.api.upload, formData).then(res => {
          // 返回图片url
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      }
    })
  })
  return promise
}

Vue.prototype.$uploadFile = uploadFile

axios请求头设置

import Vue from 'vue'
import { baseURL } from '@/config/env'
import axios from 'axios'

// formdata 请求
const axiosT = axios.create({
  baseURL: baseURL,
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

const XHR = ({method = 'post', qs = true, loading = false, loginRequire = true, reqComplex = false, reqContentType = 'urlencoded'}) => {
  // 带请求进度条成功方法
  const sucFunX = res => {
    return res.data
  }
  // 成功执行方法
  const sucFunC = res => {
    return res.data
  }
  // 带请求进度条失败方法
  const errFunX = err => {
    console.log(err, NProgress.done())
  }
  // 失败执行访求
  const errFunC = err => {
    console.log(err)
  }
  // 判断是否需要Longing
  const sucFun = loading ? sucFunX : sucFunC
  // 判断是否需要Longing
  const errFun = loading ? errFunX : errFunC
  return {user, sucFun, errFun}
}

// 表单请求 图片上传
const axiosfrom = function (url = '', data = {}) {
  let {sucFun, errFun} = XHR({loading: false})
  return axiosT.post(url, data).then(sucFun).catch(errFun)
}
// 表单请求
Vue.prototype.$axiosfrom = axiosfrom
Vue.axiosfrom = axiosfrom