Vue上传文件或图片摘要

最新推荐文章于 2023-05-09 14:59:42 发布

weixin_34072637

最新推荐文章于 2023-05-09 14:59:42 发布

阅读量174

点赞数

文章标签： javascript 前端 python ViewUI

原文链接：https://my.oschina.net/u/2251646/blog/1438984

版权

2019独角兽企业重金招聘Python工程师标准>>>

一般图片上传都是通过表单提交进行上传，而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());
       //........
}

转载于:https://my.oschina.net/u/2251646/blog/1438984