文件图片上传

vue

----------------------------------------

<el-upload
class="upload-demo"
ref="upload"
:limit="limitNum"
:class="{hide:hideUploadEdit}"
:on-remove="handleRemove"
:on-change="handleEditChange"
:http-request="ImgUploadSectionFile"
:before-upload="beforeAvatarUpload"
:with-credentials="true"
:auto-upload="true"
accept=".png, .jpg"
action=""
list-type="picture-card"
:file-list="fileList">
<i slot="trigger" class="el-icon-plus"></i>
<!-- <el-button slot="trigger" type="primary">选取图片</el-button> -->
</el-upload>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>

---------------------------------------------

js

---------------------------------------------

// http-request自定义上传
ImgUploadSectionFile(file) {
this.file = file;

}

// 上传到服务器
submitUpload() {
console.log(this.file);
console.log("this.fileList:", this.fileList);
console.log(this.fileListaaa);
console.log(this.fileListaaa[0]);

if (!this.file) {
this.$message("请选择图片");
} else {
let formData = new FormData(); //formdata格式
// formData.append("picture",this.fileList[0].raw);
// formData.append("picture", this.file.file);
// for(var file in fileList){
// formData.append('picture', file.raw)
// }
//循环已选择文件列表 fileList,将文件取出放入 formData 的file数组中
for (let i = 0; i < this.fileListaaa.length; i++) {
formData.append("picture",this.fileListaaa[i].raw);
}
// this.$refs.testForm.$children[0].fileList.forEach(function(file){
// //三个参数依次是: @RequestParam中的字符串, 文件对象, 文件的名称(***.png)
// form.append("picture", file.raw);
// })
console.log(formData);
axios({
method: "post",
url: baseUrl + '/medemr/maintain/yg/queryYG1', //这里填写上传图片的接口,
data: formData, //这里可以填写上传时携带的数据,不需要可以不写
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(result => {
console.log("上传成功:", result);
})
.catch(err => {
console.log(err);
});
}
},

-------------------------------------------------

后台

-----------------------------------------------------

 @RequestMapping("queryYG1")
@ResponseBody
public FileResult reSromsg1(@RequestParam("picture") MultipartFile[] picture) {
System.out.println(JsonDateUtils.getJson(new Date()));
// System.out.println(JsonDataUtils.getJson(picture));
System.out.println("您已进入图片上传服务");
System.out.println("picture" + picture.length);
System.out.println(picture[0]);
JSONObject jsonObject = null;

//获取文件在服务器的储存位置
String path = "G://jsp学习";
File filePath = new File(path);
logger.info("文件的保存路径:" + path);
if (!filePath.exists() && !filePath.isDirectory()) {
logger.info("目录不存在,创建目录:" + filePath);
filePath.mkdir();
}

boolean flag = true;
for (int i = 0; i < picture.length; i++) {
//获取原始文件名称(包含格式)
String originalFileName = picture[i].getOriginalFilename();
logger.info("原始文件名称:" + originalFileName);

//获取文件类型,以最后一个`.`为标识
String type = originalFileName.substring(originalFileName.lastIndexOf(".") + 1);
logger.info("文件类型:" + type);
//获取文件名称(不包含格式)
String name = originalFileName.substring(0, originalFileName.lastIndexOf("."));

String fileName = UUIDUtils.getUUID32() + name + "." + type;
logger.info("新文件名称:" + fileName);

//在指定路径下创建一个文件
File targetFile = new File(path, fileName);
logger.info("图片地址:" + path + "/" + fileName);
//将文件保存到服务器指定位置
try {
picture[i].transferTo(targetFile);
logger.info("上传成功");
//将文件在服务器的存储路径返回
// return new FileResult(true,fileName,path+"/"+fileName);
} catch (IOException e) {
logger.info("上传失败");
e.printStackTrace();
// return new FileResult(false, "上传失败","");
}
}
if (flag) {
return new FileResult(true, "", path + "/" + "");
} else {
return new FileResult(false, "上传失败", "");
}

}
原文地址:https://www.cnblogs.com/adai-study-1030/p/13730052.html