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 axiosfrom = function (url = '', data = {}) {
  return axiosT.post(url, data).then((res) => {
    return res.data
  }).catch((error) => {
    return error.response.data
  })
}

// 表单请求
Vue.prototype.$axiosfrom = axiosfrom
Vue.axiosfrom = axiosfrom