在做前後端分離項目的時候,要使用阿里雲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)
,參數類型必須和前端一樣,否則會報空指針異常