vue 上传图片函数封装直接调用

更新一下内容，代码已更新。特定情况下出现了一个小bug，页面中一个input多次上传同一个文件，上传前需要先清空input的value，否则@change事件将不会触发

结构，样式可以自己修改

<input type="file" @change="addimg($event)">

在公用函数commonfn.js文件里面添加一个方法

let fileBaseurl = 'http://xxxxxxxxxxxx/upImages' //你的图片上传地址
import axios from 'axios';export function uploadimg (event) { // 传参是$eventlet img1 = event.target.files[0];let type = img1.type;let size = img1.size;let typelist = 'image/jpeg, image/png, image/jpg'if (typelist.indexOf(type) === -1) {  alert('支持上传的图片格式不对')return false;  }if (size>5242880) {  alert('上传图片不能大于5m')return false;  }  let form = new FormData();form.append('file',img1);event.target.value = '' // 一个inputfile多次上传前清空return axios.post(fileBaseurl, form, {headers:{'Content-Type':'multipart/form-data'},withCredentials:true}).then(res => {let result = res.datareturn Promise.resolve(result)}).catch(res => {return Promise.reject(res.data)})
}

调用

//script 引入
import { uploadimg } from '@/xxxxxxx/commonfn.js' // 按自己的文件位置引入// methods里面执行
addimg (el) {uploadimg(el).then(res => {console.log(res) //返回值}).catch(res => {alert('上传失败')})
},

返回结果展示,这个比较简单应该易懂。over

vue 上传图片函数封装直接调用相关推荐

html5+php调用android手机图片,HTML5拍照上传图片Phonegap封装HTML5调用Android相机拍照上传到PHP端...
HTML5拍照: 参考网址:http://blog.csdn.net/hfahe/article/details/7354912 上传部分也可以用ajax: $.ajax({ url: 'http:/ ...
最终的动画函数封装（2）
<button>点击触发1</button><button>点击触发2</button><div></div> <styl ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
python封装一个函数并调用_python - 函数的封装与调用
一.函数的定义,函数名,函数体以及函数的调用 1.函数的定义语法: def 函数名(): 函数体 2.函数名的定义与变量名命名一样 3.函数的封装与调用 #函数的封装 defyue():print(' ...
vue 全局函数的定义与任意调用（代码篇）
文章目录 vue 全局函数的定义与任意调用方法一: 首先: 之后: 最后: 打印结果 · 截图: 方法二:[推荐] 代码:注意事项: vue 全局函数的定义与任意调用方法一: 首先: 随意新建 ...
python接口自动化（三十四）-封装与调用--函数和参数化（详解）
简介前面虽然实现了参数的关联,但是那种只是记流水账的完成功能,不便于维护,也没什么可读性,随着水平和技能的提升,再返回头去看前边写的代码,简直是惨不忍睹那样的代码是初级入门的代码水平都达不到.接下来 ...
vue一些常用的工具函数封装
(防抖节流深拷贝数组对象去重前端uuid生成,文件下载等函数封装) 1.校验数据类型 export const typeOf = function(obj) {return Object.pr ...
Matlab函数封装为DLL供Cpp调用
Matlab函数封装为DLL供Cpp调用文章目录 Matlab函数封装为DLL供Cpp调用 Ⅰ目标 Ⅱ 学习 Ⅲ 实现 1. Matlab 函数封装为DLL 2. vs2015中C++调用Matla ...
C语言嵌套函数封装替换,函数可以嵌套定义但不能嵌套调用吗,嵌套函数
函数可以嵌套定义但不能嵌套调用吗一个函数可以被定义为嵌套的,但不能被称为嵌套的吗,不对,函数可以嵌套调用,但不能嵌套定义.在C语言中,所有函数都是并行的,即定义函数时相互独立,一个函数不从属于另一个函 ...

vue 上传图片函数封装直接调用

更新一下内容，代码已更新。特定情况下出现了一个小bug，页面中一个input多次上传同一个文件，上传前需要先清空input的value，否则@change事件将不会触发

结构，样式可以自己修改

在公用函数commonfn.js文件里面添加一个方法

调用

返回结果展示,这个比较简单应该易懂。over

vue 上传图片函数封装直接调用相关推荐

最新文章

热门文章

vue 上传图片函数封装 直接调用

更新一下内容，代码已更新。特定情况下出现了一个小bug，页面中一个input多次上传同一个文件，上传前需要先清空input的value，否则@change事件将不会触发

结构，样式可以自己修改

在公用函数commonfn.js文件里面添加一个方法

调用

返回结果展示,这个比较简单应该易懂。over

vue 上传图片函数封装 直接调用相关推荐

最新文章

热门文章

vue 上传图片函数封装直接调用

vue 上传图片函数封装直接调用相关推荐