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

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

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！