您的位置：首页 > Web前端 > Vue.js

Vue formData实现图片上传

2019-08-20 14:09 1091 查看

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

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Vue formData 图片上传

相关文章推荐

新的分享

章节导航