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 css styleFloat和cssFloat
Mar 15 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 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快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
DOM相关内容速查手册
2007/02/07 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
优秀护士演讲稿
2014/04/30 职场文书
淘宝店策划方案
2014/06/07 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
详解Nginx 工作原理
2021/03/31 Servers
nginx日志格式分析和修改
2022/04/28 Servers