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 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
React快速入门教程
Jan 17 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
BBS(php & mysql)完整版(七)
2006/10/09 PHP
配置支持SSI
2006/11/25 PHP
url decode problem 解决方法
2011/12/26 PHP
php实现rc4加密算法代码
2012/04/25 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
如何把python项目部署到linux服务器
2020/08/26 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
国贸专业的职业规划范文
2014/01/23 职场文书