Vue+SSM使用Elenent的上传组件.实现单文件上传手动上传.javascriptqq34271516的博客-

Vue+SSM使用Elenent的上传组件.实现单文件上传手动上传.

<template> <div> <el-upload                 action="" :auto-upload='false' :file-list="fileList" :on-change="handleChange" > <!-- action 我这里演示手动上传就不需要选择服务器地址,但是该参数必须要,不然会报错 --> <!-- :auto-upload='false' 改属性默认为 true 会默认直接提交文件 我这边手动提交所以选择 false--> <!-- :file-list="fileList" 官网上是上传的文件列表, 我这边为了单文件,实现第二次选择上传清空--> <!-- :on-change="handleChange" 文件状态改变时的钩子函数 --> <!-- 你可以自己测试完成之后,添加更多的样式 --> <!--该按钮选取文件 是el-upload组件的一个插槽,不添加改方法你不能选取文件--> <el-button slot="trigger" type="primary" @click="delFile">选取文件</el-button> <!--单击上传到服务器(提交)按钮 --> <el-button type="success" @click="submitUpload">上传到服务器</el-button> </el-upload> </div> </template> <script> export default {         name: "test", data() { return {                 fileList: [], }; },         methods: { /*重新选择的时候清楚原来的文件*/ delFile() { this.fileList = []; }, /*文件状态改变时的钩子函数*/ handleChange(file, fileList) {//该方法很重要,从你选择的fileList文件赋值给你定义的this.fileList this.fileList = fileList; }, /*单击上传到服务器(提交)按钮*/ submitUpload() { let formData = new FormData();//文件转换 //fileList 对应你服务器接受名称                 formData.append("fileList", this.fileList[0].raw); //这边"$http"我重新封装了axios,你可以改成自己的.但是必须是post来请求, //https://localhost:8082/yiban_zlj/fileUpload改成你服务器文件上传的API地址 //formData请求带的数据 //{"Content-Type": "multipart/form-data;charset=utf-8"}是文件上传必须要的 //最后可以打印返回的服务器返回的数据,如果控制台报错接受你哪里没有写对 this.$http.post('https://localhost:8082/yiban_zlj/fileUpload', formData, {"Content-Type": "multipart/form-data;charset=utf-8"}).then(res => {                     console.log(res) }) } } }; </script> <style scoped> </style> 

我这边用SSM写的后台,控制层,上传的API

 @ResponseBody @RequestMapping(value = "/fileUpload") public String handlerForUpload(@RequestParam("fileList") MultipartFile multipartFile, HttpServletRequest request) { //判断所上传文件是否存在 if (multipartFile.isEmpty()) { return "上传错误"; } //获取上传文件的原始名称         String originalFilename = multipartFile.getOriginalFilename(); //设置上传文件的保存地址目录         String dirPath = request.getServletContext().getRealPath("/upload/");         File filePath = new File(dirPath); //如果保存的地址不存在,就先创建目录 if (!filePath.exists()) {             filePath.mkdirs(); } //获取当前文件的后缀         String suffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1); //使用UUID重新命名上传的文件名称(UUID(唯一识别码)+原始文件名称后缀)         String newFileName = UUID.randomUUID() + "." + suffix; try { //创建可能会有错误,强制添加异常             multipartFile.transferTo(new File(dirPath + newFileName)); } catch (IOException e) {             e.printStackTrace(); return "上传错误"; }         System.out.println(dirPath + newFileName); return "上传成功"+"文件地址="+dirPath + newFileName; }