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 - 如何引入js代码
Mar 09 Javascript
提高 DHTML 页面性能
Dec 25 Javascript
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
详解Layer弹出层样式
Aug 21 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
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学习笔记(一) 简单了解PHP
2014/08/04 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
python实现ip查询示例
2014/03/26 Python
python简单实现旋转图片的方法
2015/05/30 Python
python更新列表的方法
2015/07/28 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
Java面向对象面试题
2016/12/26 面试题
机关驾驶员违规检讨书
2014/09/13 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS