本文介绍如何在Vue项目中利用FormData对象实现图片上传功能。通过封装Vue原型方法$uploadFile触发文件选择，结合自定义Axios实例配置multipart/form-data请求头，完成文件数据提交。内容涵盖关键代码实现、请求头设置及错误处理机制，为前端文件上传提供实用参考。
Vue图片上传实现方案
本文分享了一个基于Vue和FormData实现图片上传的具体代码示例，供读者参考学习。
文件选择与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 = uploadFileAxios请求头配置
在发起请求前，需正确设置Axios的请求头信息。
自定义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以上内容为本文的全部介绍，希望能为读者的学习提供一定帮助，同时也欢迎读者继续支持本站。