大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184073.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...