axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios： 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios –save 3.直接利用cdn引入 <script src="https://unpkg.com/axios...
我相信很多使用vuejs的朋友，都有采用ajax上传图片的需求，因为前后端分离后，我们希望都能用ajax来解决数据问题，传统的表单提交会导致提交成功后页面跳转，而使用ajax能够无刷新上传图片等文件。其实已经有朋友封装了相关的npm包，但是我想说用原生的js api来实现，也用不了多少代码，而且更灵活，能使用原生就尽量用原生。接下来就以一个简单的头像上传来说明如何使用。 效果图前端实现<template><div class="admin"><div class...
浏览器上传图片到服务端，我用过两种方法： 1.本地图片转换成base64，然后通过普通的post请求发送到服务端。 操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交。 form表单提交图片会刷新页面，也可以时form绑定到一个隐藏的iframe上，可以实现无刷新提交数据。但是如果想传输多条form表单数据，需要写很多dom，同时还要写iframe，太麻烦。 目前感觉比较干净的办法就是通过axios的post请求，发送for...
本文实例教大家如何编写一个vue上传图片组件，具体如下 1.首先得有一个[type=file]文件标签并且隐藏，changge事件来获取图片： <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> 2.触发隐藏的文件标签：（通过原生的click来触发） document.getElementById(upload_file).click() 3.获取file文件里面的值方法：fileChange($event) fileChange(el){ if (!el.target.files[0].si...
这篇博客也不知道起个什么名字比较好，毕竟刚开始学习vue，很多还不是很熟悉，一直在慢慢摸索中；之前也习惯了用jQuery写js代码，思维逻辑也要有个转换的过程。 1. 转变思维 使用vue编写代码，首先要做的就是转换思维，vue是一个数据驱动的框架，我们只需要操作数据，数据变化后，vue会自动改变DOM结构，而jQuery是直接操作DOM的。比如刚开始写的代码中犯的错误，有一个页面中的input标签是并列多个的，而且name属性的值是自增的，...
最近爱上了用vue.js做前端，昨天用vue上传图片时遇到了问题，最后半天时间终于摸索出来，我将相关部分的代码贴出来。 前端部分 <div class="form-group"><label>背景图</label><input type="file" class="form-control" @change="onFileChange"></div> <div class="form-group" v-if="image"><label>背景图预览</label> </div>vue.js部分 在methods里添加 onFileChange(e) {var files = e.target.files || e.dataTransfe...
基于VUE选择上传图片并在页面显示，图片可删除，具体内容如下 demo例子：依赖文件：jqueryform HTML文本内容： <template><div id="accident"><div class="wrapper"><i class="icon-pic"></i>相关照片<button type="button" @click="change_input()">上传照片</button><form id="addTextForm" @change="setImg($event)"></form></div><div id="img-wrapper" @click="deleteImg($event)"></div><P class="btn-wrapper"><mt-button t...
由于项目是thinkPHP做后端框架，一直以来都是多页面的后端路由，想使用火热的webpack有点无从下手（原谅我太菜，而且推广vue只有我一个人……），没办法，想把vue用起来，唯有在原来的基础上改进。使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件，这样每一个组件就是一个 .vue 文件，哪里用上这个组件就引入进来，维护起来确实很爽。然而一直以来项目用的都是require.js，那又想以这样的形式来组织vue组件，还要...
请求接口封装 一般来说请求接口封装是很常见的，就好比你要经常拿一个东西，当然你需要把这个东西好好的规划在一个地方，方便以后用来查找