前端用的ElementUI的上传组件,然后直接调用后台的接口。
讲解都写成注解了,哪里有意见或者不明白欢迎来评论。
1、后台代码:主要使用了SpringMvc提供的MultipartFile类
@CrossOrigin
@RestController
@RequestMapping("/upload")
public class UploadController {
@Autowired
private HttpServletRequest request;
@CrossOrigin
@PostMapping(value="/native",produces = {"text/plain;charset=UTF-8"})
public String nativeUpload(@RequestParam("file") MultipartFile file){
//获取上传文件的原始名称
String originalFilename = file.getOriginalFilename();
String path = request.getSession().getServletContext().getRealPath("").toString()+"/upload/";
String filePath=path+"/"+file.getOriginalFilename();
File desFile=new File(filePath);
//如果文件夹不存会直接创建。
if(!desFile.getParentFile().exists()){
desFile.mkdirs();
}
try {
file.transferTo(desFile);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "http://localhost:8888/schoolms/upload/"+newFileName;
//return filePath;
}
2、前端代码
<el-upload
class="upload-demo"
action="你的后台接口地址"
//文件上传成功时发生
:on-success="handleAvatarSuccess"
//文件选取之前发生
:before-upload="beforeAvatarUpload"
multiple
//设置显示已上传的文件的个数
:limit="3"
:file-list="fileList">
<el-button `size="small" type="primary" :src="imageUrl" >点击上传
</el-button>
<div slot="tip" class="el-upload__tip">只能上传XXX文件</div>
</el-upload>
data(){
return{
imageUrl: '',
}
},
method(){
//文件上传
handleAvatarSuccess(res, file) {
if(file.response){
var self=this;
self.imageUrl = file.response;
// console.log(self.imageUrl);
}
},
beforeAvatarUpload(file) {
const isJPG = file.type === '.jpg/.jpeg';
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isJPG) {
this.$message.error('上传文件只能是 jpg/jpeg格式!');
}
if (!isLt10M) {
this.$message.error('上传文件大小不能超过 10MB!');
}
return isLt10M; //isJPG &&
},
}
以上代码就可以实现文件的上传了,希望对在开发之中的伙伴有帮助,那里不明白欢迎大家一起讨论,共同进步。