本文实例为大家分享了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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!