文件上传

前端代码：

vue  main.js :

import axios from 'axios';

Vue.prototype.$axios = axios

js  代码：

<label>仅支持png,jpg,jpeg格式,上传大小不能超过1M</label><br/> 
<input type="file" @change="getFile($event)" multiple  accept='image/png,image/jpg,image/jpeg' />
<button @click="submitForm($event)">上传</button> 

multiple  多个文件上传

accept   上传文件类型

<script> 
var vm = new Vue {
  data(){
    files:[], 		 
  },
methods: {
      submitForm: function (event) { 
		var _this=this;
		var url ="http://127.0.0.1/fileUpload/upload";
		var fd = new FormData()
		for(var i=0;i<_this.files.length;i++){
                     fd.append('file'+i, _this.files[i])
		}				
		let config = {
		    headers: {
		    'Content-Type': 'multipart/form-data'
		    }
		} 
		_this.$axios.post(url,fd,config).then((result) => {        
                        zdalert("系统提示","上传成功") 
                  }).catch((err) =>{
			console.log(err)
			zdalert("系统提示","上传失败") 
                  });			 
      },
      getFile: function (even) {
		this.files = event.target.files; 
		for(var i=0;i<this.files.length;i++){
			console.log(this.files[i].size)
			if(this.files[i].size>1048576){
				this.files=[];
				zdalert("系统提示","图片大小超过上限！");
				break;
			}
		}
      },
    }
}

后端代码：

创建依赖：

                <dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>
		<dependency>
			<groupId>commons-lang</groupId>
			<artifactId>commons-lang</artifactId>
			<version>2.6</version>
		</dependency>
		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.5</version>
		</dependency>
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.17</version>
		</dependency>

后台接受文件

@RestController
@RequestMapping("/fileUpload")
public class FileUploadController {
    private Logger logger = Logger.getLogger(FileUploadController.class);
    /*多图片上传,上传大小不能超过1M*/
    @RequestMapping(value="/upload",method= RequestMethod.POST)
    @ResponseBody
    public String upload(MultipartHttpServletRequest request)throws IOException{
        String result = "";
        Map map=request.getFileMap();
        List<String> list=new ArrayList();
        for(int i=0;i<map.size();i++){
            MultipartFile file = (MultipartFile)map.get("file"+i);
            String filename = file.getOriginalFilename();
            String[] splits = filename.split("\\.");
            String type = splits[(splits.length-1)];

            String name=filename.substring(0,filename.lastIndexOf("."));
            InputStream inputStream = null;
            FileOutputStream outputStream = null;
            try {
                inputStream = file.getInputStream();
                // 给新文件拼上时间毫秒，防止重名
                long now = System.currentTimeMillis();
                File fil = new File("c:/", name+"-" + now + "."+type);
                fil.createNewFile();

                outputStream = new FileOutputStream(fil);

                byte temp[] = new byte[1024];
                int size = -1;
                while ((size = inputStream.read(temp)) != -1) { // 每次读取1KB，直至读完
                    outputStream.write(temp, 0, size);
                }

                logger.info("File load success.");
                result = "File load success.";
            } catch (IOException e) {
                logger.warn("File load fail.", e);
                result = "File load fail.";
                return result;
            }finally {
                outputStream.close();
                inputStream.close();
            }
        }
        return result;
    }
}