关于使用阿里云oss存储以及nginx中前后端分离出现的问题
这个问题是关于使用阿里云oss上传头像的,在swagger ui中测试是没有问题的,数据库以及阿里云上面都有存储的数据.
问题在前端,找的我都快吐了
点击保存页面消失,控制台没有任何提示,图片在阿里云以及数据库都没有,因为在idea中报了一个错误
也就是这个oss上传出现的空指针异常,但是我用swagger测试并没有错,
会不会是nginx中出现错误了,这是在nginx.conf中修改的代码
通过9001端口代理了两个新的端口
,感觉也没有错误,那他这个空指针到底哪里错了.个人感觉实在前端传输数据给后端时出错了,从而让后端找不到前端的接口,
但是错误我找不到,下面是vue代码,
dev中的端口已经设置为9001,实在找不到那出现了问题,如果是后端哪错的话,可以发一下后端代码,
//这是头像的页面的方法以及相关属性
<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
},