文档章节

Vue上传文件或图片摘要

 冰shang蚊
发布于 2017/07/17 14:13
字数 262
阅读 47
收藏 0

一般图片上传都是通过表单提交进行上传,而vue也是类似这种方式进行文件图片上传。

vue是通过vue-resource三方插件进行请求网络,所以首先需要导入vue-resources.js组件库。

vue是通过获取上传文件对象,存入带请求body中,带入到请求URL操作中

代码如下:

<div id="main">
		<input ref="files" type="file" name="avatar" id="avatar" v-on:change="getImageFile">
		<button @click="upload">上传图片</button>
</div>

js代码

new Vue({

    el: '#main',
    data:{
       uploadImgFile:null
    },
    methods: {
			getImageFile(e){//获取上传图片数据对象
				e.preventDefault();
				this.uploadImgFile = e.target.files;
			},
			upload: function(e) {
				var data = new FormData();
				data.append('avatar', this.uploadImgFile[0]);//组成格式{0: File, length: 1}
				this.$http({
					method: "POST",
					url: "http://127.0.0.1:8089/mf-mobile/uploadImage.do",
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
					},
					body:data,//文件数据存入请求body中
					params: {
						userId: localStorage.getItem("userId"),
						thirdSession: localStorage.getItem("thirdSession")
					}
				}).then(function(res) {
					console.info(res.data);					
				}, function(error) {});       
			}
		}

})

服务端接收代码

  @RequestMapping(value = "/uploadImage.do", method = RequestMethod.POST)
    public void uploadImage(@RequestParam(value = "avatar", required = false)CommonsMultipartFile file, HttpServletRequest request, HttpServletResponse response) {
            //获取源文件
           String fileName = file.getOriginalFilename();
          //获取文件后缀
         String suffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());
       //........
}

 

© 著作权归作者所有

粉丝 1
博文 44
码字总数 29598
作品 0
海淀
私信 提问
Vue插件开发流程详解-从开发到发布至npm(二)

 前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,(这里感谢博客园的网友,给我点赞推荐了) 说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入...

大灰狼的小绵羊哥哥
2018/09/16
0
0
vue插件开发流程详解-从开发到发布至npm(二)

  前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果封装vue插件,如何测试vue插件,...

阿逗
2018/09/16
0
0
一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

1.前言 本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构。 项目地址:github.com/biaochenxuy… 文章的图文结合版 Vue-family.md Vue-family.pdf 2. Vue ...

全栈修炼
05/12
0
0
CKeditor的爬坑之旅:vue项目下选择媒体库图片

最近在用vue写项目的管理后台,由于是电商+cms项目,所以我们开发了媒体库来管理所有的素材,但是问题来了,在发布文章的时候,我是用了开源的ckeditor,原来带的选择图片上传插件,只能自定...

unfind
2018/05/19
0
0
FileReader初步使用实现上传图片预览效果

FileReader 作为文件处理读取器现在用处相对多一些。初次使用作为上传预览实例 首先要有input 和img 属性有点多因为我这个是vue的项目所以有用到ref,jq的话就可以直接用id 来查找元素进行事...

Castiel_Z
2018/05/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spark内置图像数据源初探

概述 在Apache Spark 2.4中引入了一个新的内置数据源, 图像数据源.用户可以通过DataFrame API加载指定目录的中图像文件,生成一个DataFrame对象.通过该DataFrame对象,用户可以对图像数据进行简...

阿里云官方博客
6分钟前
2
0
掌握Composer

这一次,真正掌握composer composer是现代PHP的基石 现代高级编程语言,依赖管理工具是必不可少的。Java有Maven,Python有pip,Nodejs有npm, 而在composer出现之前,PHP只有被广为诟病的Pea...

城市之雾
13分钟前
1
0
Shell中的函数、数组、告警系统

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.20 告警系统主脚本 20.21 告警系统配置文件 20.22 告警系统监控项目 20.23/20.24/20.25 告警系统邮件引擎 20.26 ...

tobej
14分钟前
1
0
Win7系统安装hadoop

环境准备 安装JDK1.8,配置JAVA_HOME 下载hadoop_3.1.2,配置HADOOP_HOME 配置HDFS 修改hadoop-env.cmd 增加 set HADOOP_PREFIX=%HADOOP_HOME%set HADOOP_CONF_DIR=%HADOOP_PREFIX%\etc\ha......

铲平王
17分钟前
1
0
IT兄弟连 Java语法教程 Java语言的其他特性

Java语言中除了非常重要的跨平台特性外,还有如下几个关键特性: ● 语法简单易学 Java语言的语法简单明了,容易掌握,而且是纯面向对象(OOP)的语言,Java语言的简单性主要体现在以下几个方...

老码农的一亩三分地
30分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部