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 原型学习总结
Oct 29 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
js date 格式化
Feb 15 Javascript
解析Vue.js中的组件
Feb 02 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
银行职员思想汇报
2013/12/31 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
投诉信回复范文
2015/07/03 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
领导新年致辞2016
2015/07/29 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript