ssm上传文件至服务器,Vue+SSM使用Elenent的上传组件.实现单文件上传手动上传.

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

action=""

:auto-upload='false'

:file-list="fileList"

:on-change="handleChange"

>

选取文件

上传到服务器

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来请求,

//http://localhost:8082/yiban_zlj/fileUpload改成你服务器文件上传的API地址

//formData请求带的数据

//{"Content-Type": "multipart/form-data;charset=utf-8"}是文件上传必须要的

//最后可以打印返回的服务器返回的数据,如果控制台报错接受你哪里没有写对

this.$http.post('http://localhost:8082/yiban_zlj/fileUpload', formData, {"Content-Type": "multipart/form-data;charset=utf-8"}).then(res => {

console.log(res)

})

}

}

};

我这边用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;

}

标签：文件,Vue,String,fileList,newFileName,Elenent,dirPath,上传

来源： https://blog.csdn.net/qq_34271516/article/details/105885775