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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
JavaScript面向对象之体会[总结]
Nov 13 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
jQuery侧边栏实现代码
May 06 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 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教程 预定义变量
2009/10/23 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python实现文件的备份流程详解
2019/06/18 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
python处理RSTP视频流过程解析
2020/01/11 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
母亲节感恩寄语
2014/02/21 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
学校社团活动总结
2015/05/07 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书