SpringBoot+Vue项目，本地上传图片时无法显示，如下图所示，附上代码，求指导如何修改代码？
admin/src/views/center.vue
<template>
<div>
<el-form
class="detail-form-content"
ref="ruleForm"
:model="ruleForm"
label-width="80px"
>
<el-row>
<el-col :span="12">
<el-form-item v-if="flag=='jiajiao'" label="家教账号" prop="jiajiaozhanghao">
<el-input v-model="ruleForm.jiajiaozhanghao"
placeholder="家教账号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='jiajiao'" label="密码" prop="mima">
<el-input v-model="ruleForm.mima"
placeholder="密码" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='jiajiao'" label="家教姓名" prop="jiajiaoxingming">
<el-input v-model="ruleForm.jiajiaoxingming"
placeholder="家教姓名" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='jiajiao'" label="性别" prop="xingbie">
<el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
<el-option
v-for="(item,index) in jiajiaoxingbieOptions"
v-bind:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item v-if="flag=='jiajiao'" label="照片" prop="zhaopian">
<file-upload
tip="点击上传照片"
action="file/upload"
:limit="3"
:multiple="true"
:fileUrls="ruleForm.zhaopian?ruleForm.zhaopian:''"
@change="jiajiaozhaopianUploadChange"
></file-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='jiajiao'" label="联系电话" prop="lianxidianhua">
<el-input v-model="ruleForm.lianxidianhua"
placeholder="联系电话" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='jiajiao'" label="家教邮箱" prop="jiajiaoyouxiang">
<el-input v-model="ruleForm.jiajiaoyouxiang"
placeholder="家教邮箱" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='xuesheng'" label="学号" prop="xuehao">
<el-input v-model="ruleForm.xuehao"
placeholder="学号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='xuesheng'" label="密码" prop="mima">
<el-input v-model="ruleForm.mima"
placeholder="密码" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='xuesheng'" label="学生姓名" prop="xueshengxingming">
<el-input v-model="ruleForm.xueshengxingming"
placeholder="学生姓名" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='xuesheng'" label="性别" prop="xingbie">
<el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
<el-option
v-for="(item,index) in xueshengxingbieOptions"
v-bind:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item v-if="flag=='xuesheng'" label="头像" prop="touxiang">
<file-upload
tip="点击上传头像"
action="file/upload"
:limit="3"
:multiple="true"
:fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
@change="xueshengtouxiangUploadChange"
></file-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='xuesheng'" label="手机" prop="shouji">
<el-input v-model="ruleForm.shouji"
placeholder="手机" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="flag=='xuesheng'" label="邮箱" prop="youxiang">
<el-input v-model="ruleForm.youxiang"
placeholder="邮箱" clearable></el-input>
</el-form-item>
</el-col>
<el-form-item v-if="flag=='users'" label="用户名" prop="username">
<el-input v-model="ruleForm.username"
placeholder="用户名"></el-input>
</el-form-item>
<el-col :span="24">
<el-form-item>
<el-button type="primary" @click="onUpdateHandler">修 改</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber,isIntNumer,isEmail,isMobile,isURL,checkIdCard } from "@/utils/validate";
export default {
data() {
return {
ruleForm: {},
flag: '',
usersFlag: false,
jiajiaoxingbieOptions: [],
xueshengxingbieOptions: [],
};
},
mounted() {
var table = this.$storage.get("sessionTable");
this.flag = table;
this.$http({
url: `${this.$storage.get("sessionTable")}/session`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.ruleForm = data.data;
} else {
this.$message.error(data.msg);
}
});
this.jiajiaoxingbieOptions = "男,女".split(',')
this.xueshengxingbieOptions = "男,女".split(',')
},
methods: {
jiajiaozhaopianUploadChange(fileUrls) {
this.ruleForm.zhaopian = fileUrls;
},
xueshengtouxiangUploadChange(fileUrls) {
this.ruleForm.touxiang = fileUrls;
},
onUpdateHandler() {
if((!this.ruleForm.jiajiaozhanghao)&& 'jiajiao'==this.flag){
this.$message.error('家教账号不能为空');
return
}
if((!this.ruleForm.mima)&& 'jiajiao'==this.flag){
this.$message.error('密码不能为空');
return
}
if((!this.ruleForm.jiajiaoxingming)&& 'jiajiao'==this.flag){
this.$message.error('家教姓名不能为空');
return
}
if( 'jiajiao' ==this.flag && this.ruleForm.jiajiaoyouxiang&&(!isEmail(this.ruleForm.jiajiaoyouxiang))){
this.$message.error(`家教邮箱应输入邮箱格式`);
return
}
if((!this.ruleForm.xuehao)&& 'xuesheng'==this.flag){
this.$message.error('学号不能为空');
return
}
if((!this.ruleForm.mima)&& 'xuesheng'==this.flag){
this.$message.error('密码不能为空');
return
}
if((!this.ruleForm.xueshengxingming)&& 'xuesheng'==this.flag){
this.$message.error('学生姓名不能为空');
return
}
if( 'xuesheng' ==this.flag && this.ruleForm.youxiang&&(!isEmail(this.ruleForm.youxiang))){
this.$message.error(`邮箱应输入邮箱格式`);
return
}
this.$http({
url: `${this.$storage.get("sessionTable")}/update`,
method: "post",
data: this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "修改信息成功",
type: "success",
duration: 1500,
onClose: () => {
}
});
} else {
this.$message.error(data.msg);
}
});
}
}
};
</script>
<style lang="scss" scoped>
</style>
src/main/java/controller/Filecontroller
package com.controller;
/**
* 上传文件映射表
*/
@RestController
@RequestMapping("file")
@SuppressWarnings({"unchecked","rawtypes"})
public class FileController{
@Autowired
private ConfigService configService;
/**
* 上传文件
*/
@RequestMapping("/upload")
public R upload(@RequestParam("file") MultipartFile file,String type) throws Exception {
if (file.isEmpty()) {
throw new EIException("上传文件不能为空");
}
String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
File path = new File(ResourceUtils.getURL("classpath:static").getPath());
if(!path.exists()) {
path = new File("");
}
File upload = new File(path.getAbsolutePath(),"/target/classes/static/upload/");
if(!upload.exists()) {
upload.mkdirs();
}
String fileName = new Date().getTime()+"."+fileExt;
File dest = new File(upload.getAbsolutePath()+"/"+fileName);
file.transferTo(dest);
if(StringUtils.isNotBlank(type) && type.equals("1")) {
ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
if(configEntity==null) {
configEntity = new ConfigEntity();
configEntity.setName("faceFile");
configEntity.setValue(fileName);
} else {
configEntity.setValue(fileName);
}
configService.insertOrUpdate(configEntity);
}
return R.ok().put("file", fileName);
}
/**
* 下载文件
*/
@IgnoreAuth
@RequestMapping("/download")
public ResponseEntity<byte[]> download(@RequestParam String fileName) {
try {
File path = new File(ResourceUtils.getURL("classpath:static").getPath());
if(!path.exists()) {
path = new File("");
}
File upload = new File(path.getAbsolutePath(),"/upload/");
if(!upload.exists()) {
upload.mkdirs();
}
File file = new File(upload.getAbsolutePath()+"/"+fileName);
if(file.exists()){
/*if(!fileService.canRead(file, SessionManager.getSessionUser())){
getResponse().sendError(403);
}*/
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
headers.setContentDispositionFormData("attachment", fileName);
return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),headers, HttpStatus.CREATED);
}
} catch (IOException e) {
e.printStackTrace();
}
return new ResponseEntity<byte[]>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
如果是上传时无法查看的话，主要是前端问题，需要修改前端代码。把你的前端代码贴上来吧。
看 file-upload 组件的代码，是这个组件问题
奇怪，不应该用el-upload吗，应该是file-upload这块有问题
看你主要也是用到了elementui组件，那图片上传这部分就可以使用el-upload组件