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上传图片等文件的更多相关文章

  1. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  2. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

  3. 介绍vue项目中的axios请求(get和post)

    一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...

  4. vue项目中关于axios的简单使用

    axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...

  5. 在vue项目中使用axios

    安装 cnpm i axios --save-dev 在项目main.js中全局引用 import axios from "axios" Vue.prototype.$http=a ...

  6. vue项目中对axios的二次封装

    近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...

  7. vue项目中要实现展示markdown文件[转载]

    转载 版权声明:本文为CSDN博主「齐天二圣」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/nihaoa5 ...

  8. vue项目中使用 SheetJS / js-xlsx 导入文件

    原表格样式; 导入效果: 1.  安装 npm install xlsx 2. 在App.vue 中引入xlsx import * as XLSX from 'xlsx'; // 数据导出导入所需要的 ...

  9. vue项目中,如何对static文件夹下的静态文件添加时间戳,以达到清除缓存

    例如config.js文件是存放在static文件夹下,里面存放的是websocket信息,需要经常改动.改动了以后由于缓存信息,使其不生效,因此需要对引入的文件添加时间戳. 最新方法: 注意转义符的 ...

随机推荐

  1. webpack配置文件--(loader)

    这篇写的很详细 https://segmentfault.com/a/1190000012718374#articleHeader9 主要的配置项: test:必须 匹配需要处理的文件的扩展名 use ...

  2. jQuery-2.DOM---jQuery遍历

    jQuery遍历之children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) ...

  3. apk签名的流程

    最后总结一下apk签名的整个流程: 一.对Apk中的每个文件做一次算法(数据SHA1摘要+Base64编码),保存到MANIFEST.MF文件中 二.对MANIFEST.MF整个文件做一次算法(数据S ...

  4. Javascript 2.8

    声明函数声明参数 function multiply(A,B,...N){}; 用return可以返回一个值/字符串/数组/布尔值 变量命名的Camel记号:从第二个单词开始把每个单词的首字母大写,其 ...

  5. 谈谈 ServerFul 架构

    我写了一篇文章 <自己实现一个线程池>  https://www.cnblogs.com/KSongKing/p/9803935.html , 其实 不仅仅 是 线程池, 中间件 层 的 ...

  6. 全面理解Java内存模型(JMM)及volatile关键字

    [版权申明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) http://blog.csdn.net/javazejian/article/details/72772461 出自[zejian ...

  7. 在宿主机查看docker使用cpu、内存、网络、io情况

    命令: docker stats [OPTIONS] [CONTAINER...] 显示所有: docker stats -a

  8. mongodb 安装使用备记

    # 1.1 安装 sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931B ...

  9. Program type already present: android.support.v4.widget.EdgeEffectCompat

    1.确保所有依赖包的 implementation 'com.android.support:appcompat-v7:25.4.0'是一样的 2.确保最外层的build.gradle中增加如下代码: ...

  10. 入坑docker

    入坑docker docker入门指南 docker入门指南 docker基础概念 docker分 server/client. server后台管理着所有的images/instances. 用户通 ...