vue用form上传图片_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

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