<van-field
label="问题点图片"
center
:left-icon="require('../../assets/u8.svg')"
>
<template #input>
<van-uploader v-model="fileList" multiple accept=".jpg,.jpeg,.png,.doc, .docx,.pdf,.xlsx,.xls" :max-count="5" :before-delete="beforeDelete" :after-read="afterRead" />
</template>
</van-field>
v-model绑定文件列表 multiple表示可以上传多个文件 accept表示可以接受上传的文件类型
max-count 表示最多上传文件个数 before-delete 表示文件删除调用函数
after-read 表示文件上传函数
data(){
return:{
fileList:[]
}
}
,methods:{
//图片上传,由提交按钮调用本方法实现手动上传
reportPicUpload() {
//如果文件列表为空,则不需要调用上传
if (forms == null || forms.length == 0) {
return;
}
axios({
method: "post",
url: base.SSO_BASEURL + "/app/kb/upload",
data: forms,
params: {
kbId: this.formInfo.sysId
}
}).then((res) => {
if (res.data.code == 200) {
Toast.success("上传成功");
} else {
// Toast.fail(res.msg);
}
}).catch((err) => {
Toast.fail("图片上传失败");
});
},
beforeDelete(file) {
console.log("del--file===>",file)
forms = null;
this.delFile(this.formInfo.sysId,file.url)
return true;
},
delFile(id,url){
this.$api.kbApi.delFile({id:id,url:url}).then(res=>{
if (res.code==200){
this.getById(id)
}
})
},
afterRead(file) {
forms = new FormData();
//"file"表示给后台传的属性名字
forms.append("file", file.file); //获取上传图片信息
this.reportPicUpload()
},
getById(id) {
this.$api.kbApi.getById({id: id}).then((res) => {
console.log(res)
if (res.data.code === 200) {
this.formInfo = res.data.data
let files = res.data.data.files
if (files){
this.fileList= []
//图片回显
for (let i = 0; i < files.length; i++) {
this.fileList.push({
name: files[i].substring(files[i].lastIndexOf('\/') + 1,
files[i].length),
url: files[i]
})
}
}
}
});
},
}
后端接口
文件上传
@PostMapping("kb/upload")
public JsonResult upload(MultipartFile file,@RequestParam Map<String, String> map){
log.info("文件上传{}{}",map.get("kbId"),file);
try {
String path = "D:/fileUpload/"+"csr"+"/"+"tyxd";
File filePath = new File(path);
if (!filePath.exists() && !filePath.isDirectory()) {
filePath.mkdir();
}
String originalFileName = file.getOriginalFilename();
File targetFile = new File(path, originalFileName);
FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(targetFile));
String fileUrl = CommonsUtil.SERVER_ADDRESS_TEST+path.replace("D:","")+"/"+originalFileName;
Map<String,Object> data = new HashMap<>();
data.put("rs",true);
data.put("file",fileUrl);
operationEyeOfHeavenService.addFile(map.get("kbId"),fileUrl);
return JsonResult.ok(data);
} catch (Exception e) {
e.printStackTrace();
return JsonResult.error("上传失败");
}
}
文件删除
@PostMapping("kb/delFile")
public JsonResult delFile(@RequestBody FileDelDto dto){
return operationEyeOfHeavenService.delFile(dto);
}
@Override
@Transactional(rollbackFor = Exception.class)
public JsonResult delFile(FileDelDto dto) {
log.info("删除文件{}",dto);
CommonsUtil.delFile(dto.getUrl());
associationImagesMapper.delByFkIdAndUrl(dto.getId(),dto.getUrl());
return JsonResult.ok();
}
public static final String SERVER_ADDRESS_TEST = "http://localhost:8082";
public static final String DISK = "D:";
// public static final String SERVER_ADDRESS_PRODUCT = "http://localhost:8081";
public static String fileUrlTransFor(String url){
if (StringUtils.isBlank(url)){
return null;
}
return url.replace(SERVER_ADDRESS_TEST,DISK);
}
public static void delFile(String url){
//使用hutool的工具类删除文件
FileUtil.del(fileUrlTransFor(url));
}