以歌单图像上传为例子：
（1）服务端接口，关键代码如下：
```java
/**
* 歌单图像上传
*/
@Log(title = "歌单图像上传", businessType = BusinessType.UPDATE)
@PostMapping("/songList/pic/{id}")
public AjaxResult songList(MultipartFile file, @PathVariable("id") long id) {
try {
String pic =
FileUploadUtils.uploadImage(RuoYiConfig.getSongListPicPath(), file);
SongList byId = iSongListService.getById(id);
byId.setPic(pic);
iSongListService.updateById(byId);
return AjaxResult.success();
} catch (IOException | NullPointerException e) {
log.error("更新文件失败", e);
return AjaxResult.error(e.getMessage());
}
}
```
（2）后台页面引入获取token,并data中添加属性。关键代码如下：
```json
import { getToken } from "@/utils/auth";
...
// 设置上传的请求头部
AUTH: {
Authorization: "Bearer " + getToken()
}
```
（3）歌单页面调用接口，关键代码如下：
```vue
<template slot-scope="scope">
<div class="music-img">
<img
:src="GetFileUrl(scope.row.pic)"
style="width: 100%;"/>
</div>
<el-upload
ref="upload"
accept=".jpg, .png, .bmp, .gif, .jpg, .jpeg"
:action="GetFileUrl('/music/file/songList/pic/')+scope.row.id"
:headers="AUTH"
:on-success="handleFileSuccess"
:show-file-list="false">
<el-button size="mini">
更新图片
</el-button>
</el-upload>
</template>
```
