Vue formData实现图片上传


Posted in Javascript onAugust 20, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
关于JavaScript回调函数的深入理解
Jun 27 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 #Javascript
vue实现axios图片上传功能
Aug 20 #Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 #Javascript
vue+element-ui+axios实现图片上传
Aug 20 #Javascript
vue element upload实现图片本地预览
Aug 20 #Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 #Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 #Javascript
You might like
利用PHP创建动态图像
2006/10/09 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
JQuery 入门实例1
2009/06/25 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Puppeteer使用示例详解
2019/06/20 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
为什么python比较流行
2020/06/19 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python中如何使用虚拟环境
2020/10/14 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
出生公证书样本
2014/04/04 职场文书
公益广告标语
2014/06/19 职场文书
小时代观后感
2015/06/10 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers