大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
问题
之前项目中前端使用了vue-cli，引入了上传组件，所以在上传文件时很容易，没有考虑太多问题。
image-cropper组件中 有url属性，直接使用:url=”文件服务器地址”绑定上传的地址即可。
<el-form-item label="讲师头像">
<!-- 头衔缩略图 -->
<pan-thumb :image="teacher.avatar"/>
<!-- 文件上传按钮 -->
<el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
</el-button>
<!-- v-show：是否显示上传组件 :key：类似于id，如果一个页面多个图片上传控件，可以做区分 :url：后台上传的url地址 @close：关闭上传组件 @crop-upload-success：上传成功后的回调 <input type="file" name="file"/> -->
<image-cropper v-show="imagecropperShow" :width="300" :height="300" :key="imagecropperKey" :url="BASE_API+'/eduoss/fileoss'" field="file" @close="close" @crop-upload-success="cropSuccess"/>
</el-form-item>
解决
本次是用的是html基本页面，没有上传组件，那么文件需要自己获取。
<form autocomplete="off">
<!--省略其他输入域……-->
<div class="form-group">
<input class="form-control" type="file" name="fileupload" @change="upLoadPicture($event)" v-model="member.avatar" accept="image/*">
<i class="icon_images"></i>
</div>
<!--省略其他输入域……-->
<div id="pass-info" class="clearfix"></div>
<a href="#0" class="btn_1 gradient full-width">立即注册!</a>
</form>
let vm = new Vue({
el: "#app",
data() {
return {
member: {
mobile: "",
password: "",
nickname: "",
avatar: "",
code: "",
}
}
},
methods: {
upLoadPicture(e) {
//获取文件
let file = e.target.files[0]
//将文件放入表单文件
let formData = new FormData();
formData.append('file', file);
//上传文件
axios.post("http://localhost:8004/oss/fileoss", formData)
.then(response => {
alert("头像上传成功！")
//将返回的图片url赋值给member
vm.member.avatar=response.data.data.url
})
}
}
})
@PostMapping
public R uploadOssFile(MultipartFile file){
//获取文件
//返回上传文件路径
String url=ossService.uploadFileAvatar(file);
return R.ok().data("url",url);
}
FormData对象的详解，https://www.jianshu.com/p/e984c3619019
主要两步：
- 使用@change和e.target.files[0]，获取我们添加的文件，
- new FormData();并且 formData.append(‘file’, file); 需要将文件条件到FormData()表单对象中，否则后端的MultipartFile 类型获取不到file对象，就会报出java.lang.NullPointerException。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/184073.html原文链接：https://javaforall.net
