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 相关文章推荐
css值转换成数值请抛弃parseInt
Oct 24 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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函数的常用方法及注意之处小结
2011/07/10 PHP
基于initPHP的框架介绍
2013/04/18 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
python中的字典使用分享
2016/07/31 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
详解Python文件修改的两种方式
2019/08/22 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
医院办公室主任职责
2013/12/29 职场文书
学生喝酒检讨书
2014/02/06 职场文书
司机检讨书
2014/02/13 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
农村党员对照检查材料
2014/09/24 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
企业整改报告范文
2014/11/08 职场文书
525心理健康活动总结
2015/05/08 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js