springBoot+vue+element实现上传功能
springBoot+vue+element实现上传功能上传工具类前端代码后端方法功能快捷键上传工具类public class UploadActionUtil {//获取一个路径publicfinalString location = RuoYiConfig.getProfile();publicList<Map<String,Object&g...
·
上传工具类
public class UploadActionUtil {
//获取一个路径
public final String location = RuoYiConfig.getProfile();
public List<Map<String,Object>> uploadFile(HttpServletRequest request) throws Exception {
List<Map<String,Object>> list = new ArrayList<>();
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
if (multipartResolver.isMultipart(request)) {
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
Iterator<String> iterator = multiRequest.getFileNames();
while (iterator.hasNext()) {
// 取得上传文件
MultipartFile file = multiRequest.getFile(iterator.next());
if (file != null) {
// 取得当前上传文件的文件名称
String myFileName = file.getOriginalFilename();
// 如果名称不为“”,说明该文件存在,否则说明该文件不存在
if (myFileName.trim() != "") {
Map<String,Object>map=new HashMap<>();
String fileTyps = myFileName.substring(myFileName.lastIndexOf("."));
String tempName = UUID.randomUUID().toString() + fileTyps;
// 创建文件夹
String folderPath = location + File.separator ;
File fileFolder = new File(folderPath);
if (!fileFolder.exists() && !fileFolder.isDirectory()) {
fileFolder.mkdirs();
}
File uploadFile = new File(location + "/" + tempName);
file.transferTo(uploadFile);
map.put("fileUrl",location + "/" + tempName);
map.put("fileName",myFileName);
list.add(map);
}
}
}
}
return list;
}
}
前端代码
采用手动上传
<Upload
ref="upload"
:format="['jpg','jpeg','png']"
:with-credentials="false"
//文件上传之前的钩子函数
:before-upload="handleUpload"
:show-upload-list="true"
//文件上传成功之后的钩子函数
:on-success="uploadSuccess"
action
>
<Button icon="ios-cloud-upload-outline">选择图片</Button>
</Upload>
//file表示将需要上传的文件保存显示出来
<div v-for="(item, index) in file" :key="index">
文件: {{ item.name }}
<Button
style="margin-left:30px;"
size="small"
//是否显示上传按钮
v-if="uploadFileFlag"
type="primary"
//点击上传触发上传方法
@click="upload"
>上传</Button>
</div>
method:{
//上传成功之后回调函数
uploadSuccess() {
console.log("大事记回调函数");
},
handleUpload(file) {
// 保存需要上传的文件
let keyID = Math.random() .toString().substr(2);
file["keyID"] = keyID;
this.file.push(file);
return false;
},
upload() {
// 上传文件
if (this.file.length === 0) {
this.msgSuccess("未选择上传文件!!");
return false;
}
for (let i = 0; i < this.file.length; i++) {
//将数据转换成FormData格式
**let fileFormData = new FormData();
fileFormData.append("file", this.file[i]);**
upload(fileFormData)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error);
});
}
},
}
后端方法
@PostMapping("/uploadFile")
public AjaxResult upload(HttpServletRequest httpServletRequest) throws Exception {
UploadActionUtil uploadActionUtil = new UploadActionUtil();
List<Map<String, Object>> list = uploadActionUtil.uploadFile(httpServletRequest);
Map<String, String> returnMap = new HashMap<>();
String fileId = "";
for (Map<String, Object> map : list) {
//生成id
fileId = IdUtils.fastSimpleUUID();
map.put("remark", fileId);
//将文件保存到数据库
returnMap = bsFileUploadService.saveFile(map);
returnMap.put("fileId", fileId);
}
return AjaxResult.success(returnMap);
}
功能快捷键
撤销:Ctrl/Command + Z
重做:Ctrl/Command + Y
加粗:Ctrl/Command + B
斜体:Ctrl/Command + I
标题:Ctrl/Command + Shift + H
无序列表:Ctrl/Command + Shift + U
有序列表:Ctrl/Command + Shift + O
检查列表:Ctrl/Command + Shift + C
插入代码:Ctrl/Command + Shift + K
插入链接:Ctrl/Command + Shift + L
插入图片:Ctrl/Command + Shift + G
查找:Ctrl/Command + F
替换:Ctrl/Command + G
更多推荐
已为社区贡献1条内容
所有评论(0)