在做前后端分离项目的时候,要使用阿里云oss远程上传图片
@PostMapping("up")
public R uploadOssFile(MultipartFile file){
//获取上传文件MultipartFile
String url = ossService.uploadFileAvatar(file);
return R.ok().data("url",url);
}
这是后端接口
<el-form-item label="讲师头像">
<!-- 头衔缩略图 -->
<pan-thumb :image = "teacher.avatar" />
<!-- 文件上传按钮 -->
<el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像</el-button>
<image-cropper
v-show="imagecropperShow"
:width="300"
:height="300"
:key="imagecropperKey"
:url="BASE_API+'/eduoss/fileoss/up'"
field="file"
@close="close"
@crop-upload-success="cropSuccess"
/>
</el-form-item>
这是前端代码,在前端代码中,field="file"
是从本地上传file
类型的文件,注意到对应后端接口中的接口:public R uploadOssFile(MultipartFile file)
,参数类型必须和前端一样,否则会报空指针异常