vue项目中使用axios上传图片等文件
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 = this
let file = e.target.files[0]
let param = new FormData() // 创建form对象
param.append('file', file) // 通过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)
})
}
vue项目中使用axios上传图片等文件的更多相关文章
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- 介绍vue项目中的axios请求(get和post)
一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...
- vue项目中关于axios的简单使用
axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...
- 在vue项目中使用axios
安装 cnpm i axios --save-dev 在项目main.js中全局引用 import axios from "axios" Vue.prototype.$http=a ...
- vue项目中对axios的二次封装
近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...
- vue项目中要实现展示markdown文件[转载]
转载 版权声明:本文为CSDN博主「齐天二圣」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/nihaoa5 ...
- vue项目中使用 SheetJS / js-xlsx 导入文件
原表格样式; 导入效果: 1. 安装 npm install xlsx 2. 在App.vue 中引入xlsx import * as XLSX from 'xlsx'; // 数据导出导入所需要的 ...
- vue项目中,如何对static文件夹下的静态文件添加时间戳,以达到清除缓存
例如config.js文件是存放在static文件夹下,里面存放的是websocket信息,需要经常改动.改动了以后由于缓存信息,使其不生效,因此需要对引入的文件添加时间戳. 最新方法: 注意转义符的 ...
随机推荐
- webpack配置文件--(loader)
这篇写的很详细 https://segmentfault.com/a/1190000012718374#articleHeader9 主要的配置项: test:必须 匹配需要处理的文件的扩展名 use ...
- jQuery-2.DOM---jQuery遍历
jQuery遍历之children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) ...
- apk签名的流程
最后总结一下apk签名的整个流程: 一.对Apk中的每个文件做一次算法(数据SHA1摘要+Base64编码),保存到MANIFEST.MF文件中 二.对MANIFEST.MF整个文件做一次算法(数据S ...
- Javascript 2.8
声明函数声明参数 function multiply(A,B,...N){}; 用return可以返回一个值/字符串/数组/布尔值 变量命名的Camel记号:从第二个单词开始把每个单词的首字母大写,其 ...
- 谈谈 ServerFul 架构
我写了一篇文章 <自己实现一个线程池> https://www.cnblogs.com/KSongKing/p/9803935.html , 其实 不仅仅 是 线程池, 中间件 层 的 ...
- 全面理解Java内存模型(JMM)及volatile关键字
[版权申明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) http://blog.csdn.net/javazejian/article/details/72772461 出自[zejian ...
- 在宿主机查看docker使用cpu、内存、网络、io情况
命令: docker stats [OPTIONS] [CONTAINER...] 显示所有: docker stats -a
- mongodb 安装使用备记
# 1.1 安装 sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931B ...
- Program type already present: android.support.v4.widget.EdgeEffectCompat
1.确保所有依赖包的 implementation 'com.android.support:appcompat-v7:25.4.0'是一样的 2.确保最外层的build.gradle中增加如下代码: ...
- 入坑docker
入坑docker docker入门指南 docker入门指南 docker基础概念 docker分 server/client. server后台管理着所有的images/instances. 用户通 ...