Vue formData实现图片上传

本文实例为大家分享了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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。