关于使用阿里云oss存储以及nginx中前后端分离出现的问题
这个问题是关于使用阿里云oss上传头像的,在swagger ui中测试是没有问题的,数据库以及阿里云上面都有存储的数据.
问题在前端,找的我都快吐了
点击保存页面消失,控制台没有任何提示,图片在阿里云以及数据库都没有,因为在idea中报了一个错误
也就是这个oss上传出现的空指针异常,但是我用swagger测试并没有错,
//这是头像的页面的方法以及相关属性
<el-form-item label="讲师头像">
<!-- 头衔缩略图 -->
<pan-thumb :image="String(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:上传成功后的回调 -->
<image-cropper
v-show="imagecropperShow"
:width="100"
:height="100"
:key="imagecropperKey"
:url="BASE_API+'/eduoss/fileoss'"
field="file"
@close="close"
@crop-upload-success="cropSuccess"/>
</el-form-item>
//这是导入的两个组件,进行头像的上传,有些无关的方法就不粘出来了
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
components: { ImageCropper, PanThumb },
data(){
return{
teacher:{ //初始化
name:'',
sort:1,
level:1,
career:'',
intro:'',
avatar:'',
},
imagecropperShow:false, //上传弹框 书否显示
imagecropperKey:0, //上传组件key值
BASE_API:process.env.BASE_API,//获取dev.env.js端口号
saveBtnDisabled: false //保存按钮是否禁用,
}
},
methods:{
close(){ //关闭上传弹窗的方法
this.imagecropperShow = false
},
cropSuccess(data){ //上传成功的方法
//上传之后得到图片地址,返回地址
this.teacher.avatar=String(data.url)
this.imagecropperShow = false
},
1.错误在你后端,处理下空值的情况就行了。你需要在第四张图中的OssServerImpl中的36行处,处理下空值的情况。或者你修改下你请求的url,空值就不要拼个null了。
2.swagger测试时,有的参数你没传值它自己会处理,后端代码你不判断空值也没问题,到时部署到服务器中其他程序调用就会空指针。
3.你用postman或者直接在服务器上调用都会出现空值,除了用swagger。
那是不是有可能跨域问题,造成数据没传到后端, 不过跨域一般报错一眼就能出来