使用axios上传照片

原来使用vue1.0的时候，我们一直使用ajax来发送请求，当接触新的项目的时候，我们使用了vue2.0,结合着使用了axios来代替ajax。

安装axios的话：

1-利用npm安装npm install axios --save

2、利用bower安装bower install axios --save

3、直接利用cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4-或者使用ES6的写法引入

import axios from 'axios'

使用的话可以参考这篇文章：http://www.jianshu.com/p/df464b26ae58

这里我只讲一下，如何使用axios上传照片：
一般情况上传照片有两种方式：

1.本地图片转换成base64，然后通过普通的post请求发送到服务端。

操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法

2.通过form表单提交。

form表单提交图片会刷新页面，也可以时form绑定到一个隐藏的iframe上，可以实现无刷新提交数据。

这里只讲解一下第二种方式：

HTML代码：

<input  name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

JS代码：

import axios from 'axios'// 添加请求头
update (e) {   // 上传照片var self = thislet file = e.target.files[0]/* eslint-disable no-undef */let param = new FormData()  // 创建form对象param.append('file', file, file.name)  // 通过append向form对象添加数据param.append('chunk', '0') // 添加form表单中其他数据console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去let config = {headers: {'Content-Type': 'multipart/form-data'}}// 添加请求头axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config).then(response => {if (response.data.code === 0) {self.ImgUrl = response.data.data}console.log(response.data)})}
/*
http://172.19.26.60:8081/rest/user/headurl这里是你的服务器接口地址
*/

其实你可以先在postman中进行测试

这里注意的是，设置 Content-Type

下面附加一个完整的单个实例：

<html><head><title>mayouchen</title></head><script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script><script type="text/javascript">function uploadpic(e){var self = thisconsole.log(e.target);let file = e.target.files[0]/* eslint-disable no-undef */let param = new FormData()  // 创建form对象param.append('file', file, file.name)  // 通过append向form对象添加数据param.append('chunk', '0') // 添加form表单中其他数据console.log("222222");console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去let config = {headers: {'Content-Type': 'multipart/form-data'}}// 添加请求头axios.post('http://xingchen.mengdian.com/rest/user/headurl', param, config).then(response => {console.log("222222");if (response.data.code === 0) {console.log(response.data.data);}console.log(response.data)})}</script><body><div class='form-div'><div class="up-pic"><input  name="file" type="file" accept="image/png,image/gif,image/jpeg" onclick="uploadpic(event)"/></div></div></body>
</html>

使用axios上传照片相关推荐

封装微信公众号上传照片方法
1.微信公众号上传照片方法 wxPic.js // 弹出提示消息的组件 import { Toast } from "vant"; // 微信JS-SDK文件,微信开发者官方有 i ...
Android使用XUtils框架上传照片（一张或多张）和文本，server接收照片和文字（无乱码）...
Android上传图片,这里我使用了如今比較流行的XUtils框架.该框架能够实现文件上传.文件下载.图片缓存等等,有待研究. 以下是Android端上传的代码: xUtils.jar下载 Strin ...
5中打开safari_iOS13版Safari浏览器新功能上线：可调节上传照片大小
11月23日消息,据报道,配合iOS 13系统使用的Safari浏览器新增了许多人性化设定,可以根据用户的个人需求,有选择地进行使用,其中就包括可以调节上传照片大小的功能. 这项功能的使用十分便捷,用 ...
点击按钮出现图片_坪山电动车上牌丨部分手机点击拍摄按钮，页面没有反应，无法拍摄人脸图片或上传照片，为什么？...
戳蓝字关注,骑行要备案,安全常相伴大家好!我是「帮你电动车轻松上牌的」小易今天继续解答广大深圳电动车车主,在操作"易骑行"小程序进行电动车备案,以及深圳电动车上牌骑行过程中遇到的常 ...
SSM+BJUI实现以Base64方式上传照片
场景点击添加--选择照片--点击保存--保存到数据库路径--页面展示. 实现前面实现照片上传可以用其他实现,这里是用BJUI来实现. 需要给后台action传过去base64Str. 添加页面代码 ...
android上传图片被旋转,input上传照片旋转解决办法
需求很简单:h5拍照上传照片,然后显示出来问题在:上传之后的图片在PC,IOS端均能正常显示,Android端显示的则是被旋转90度的. 直接上代码下面这个方法传入file对象,然后会去除掉照片中 ...
html怎么上传qq空间,qq空间怎么上传照片
当我们想要把照片上传到qq空间里,应该怎么办呢?下面就让学习啦小编告诉你空间上传照片的方法,希望对大家有所帮助. 空间上传照片的方法打开QQ主界面,在主界面头像的右则有个小星星,那就是进入空间的快捷 ...
php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
华为云备份会上传私密相册吗_云相册有哪些作用？上传照片会不会占用手机内存？...
现在苹果.华为.小米.OPPO等手机都支持"云相册"功能,而且一般大容量的云相册都是收费的,根据云相册的容量一个月需要几元或者几十元不等.付费越多,云相册的空间就越大. 很多网友以 ...

使用axios上传照片

使用axios上传照片相关推荐

最新文章

热门文章