前端代码
<div class="upload-div">
<el-upload
v-model:file-list="form.fileImageList"
ref="uploadRef"
capture="false"
action="#"
accept="image/*"
list-type="picture-card"
:on-change="handleChange"
:auto-upload="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:multiple="true"
>
<el-icon>
<Plus/>
</el-icon>
</el-upload>
<el-dialog v-model="dialogVisible" class="image-dialog">
<img style="width: 100%;height: 100%" w-full :src="dialogImageUrl" alt="Preview Image"/>
</el-dialog>
</div>
const fileBinaryList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const buttonLoading = ref(false);
const handleChange = (file, files) => {
// file是当前上传的文件,files是当前所有的文件,
fileBinaryList.value = files;
};
const handlePictureCardPreview = (file) => {
dialogImageUrl.value = file.url;
dialogVisible.value = true
}
const handleRemove = (file) => {
delImageByName(file.name).then(response => {
proxy.$modal.msgSuccess("删除成功");
}).finally(() => {
});
}
function submitForm() {
let formData = new FormData(); //FormData中的参数
formData.append('id', form.value.id);
fileBinaryList.value.forEach((item) => {
formData.append('files', item.raw);
});
uploadBinaryImage(formData);
proxy.$modal.msgSuccess("修改成功");
}
前端定义接口
export function uploadBinaryImage(data) {
return request({
url: '/update/update/uploadBinaryImage',
method: 'post',
data: data,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
后端代码
实体类
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.web.multipart.MultipartFile;
/**
* @author: rattcs
* @date: 2023/1/13
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class UploadDto {
private String id;
}
定义接口文章来源:https://www.toymoban.com/news/detail-809228.html
/**
* 上传二进制文件图片集合
*/
@SaCheckPermission("update:update:uploadBinaryImage")
@Log(title = "上传二进制文件图片", businessType = BusinessType.INSERT)
@PostMapping("/uploadBinaryImage")
public void uploadBinaryImage(@RequestBody @RequestParam("files") MultipartFile[] files, UploadDto bo) {
iInvestigationRiverLakeDischargeOutletsService.uploadBinaryImage(files,bo);
}
上传文件并插入数据库数据文章来源地址https://www.toymoban.com/news/detail-809228.html
@Value("${upload.dir}")
private String UPLOAD_DIR;
@Override
public void uploadBinaryImage(MultipartFile[] files,UploadDto uploadDto) {
String id = uploadDto.getId();
for (MultipartFile file : files) {
try {
// 检查上传目录是否存在,不存在则创建
File uploadDir = new File(UPLOAD_DIR);
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
// 获取文件名
String fileName = file.getOriginalFilename();
String suffix = file.getOriginalFilename().split("\\.")[1];
// 设置上传文件的保存路径
String fileUploadName = java.util.UUID.randomUUID() + "." + suffix;
Path filePath = uploadDir.toPath().resolve(fileUploadName);
// 将文件复制到指定路径
Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);
investigationImageMapper
.insert(new InvestigationImage() {{
setInvestigationId(Long.valueOf(id));
setImageUrl(fileUploadName);
setImageName(fileUploadName);
setCreateTime(new Date());
}});
} catch (IOException e) {
e.printStackTrace();
}
}
}
到了这里,关于Vue3使用ElementPlus中的el-upload手动上传并调用上传接口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!