Vue的formData图片上传
import Vue from 'vue'/*** 图片上传* 已注入所有Vue实例,* template模板里调用 $uploadFile(id)* 组件方法里调用 this.$uploadFile(id)*/const uploadFile = (id) => {let promise = new Promise((resolve, reject) =&...
·
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 axiosfrom = function (url = '', data = {}) {
return axiosT.post(url, data).then((res) => {
return res.data
}).catch((error) => {
return error.response.data
})
}
// 表单请求
Vue.prototype.$axiosfrom = axiosfrom
Vue.axiosfrom = axiosfrom
更多推荐
已为社区贡献17条内容
所有评论(0)