使用el-upload上传用户头像 0积分下载资源,见文末
效果图
前端代码
<el-upload
class="avatar-uploader"
:action="uploadUrl"
accept=".jpg,.png,.jpeg"
show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<el-image v-if="avator" :src="avator" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
//ts部分
export default {
setup() {
const store = useStore();
const avator = ref(store.state.avator);//图片显示
//可以将userid换成自己的参数
const uploadUrl = ref("/api/upload/images?userid=" + store.state.userid);
const handleAvatarSuccess: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
avator.value = URL.createObjectURL(uploadFile.raw!);
//更新sessionStorage和vuex
sessionStorage.setItem("avator", avator.value);
store.state.avator = avator.value;
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
if (rawFile.size / 1024 / 1024 > 2) {
ElMessage.error("图片不能超过2MB!");
return false;
}
return true;
};
return {
avator,
uploadUrl,
handleAvatarSuccess,
beforeAvatarUpload,
};
},
};
后端代码
用到了七牛云 QiniuUtil工具包 文件上传的配置见章节末
@RestController
@RequestMapping("/api/upload")
public class UploadController {
@Resource
private QiniuUtil qiniuUtil;
@Resource
private ConsumerServiceImpl consumerService;
/**
* 头像文件上传
*
* @param file
* @return
* @throws Exception
*/
@PostMapping("/images")
public Result<?> uploadImages(@RequestParam("userid") Integer userid, MultipartFile file) throws Exception {
// Result<?> result = new Result<>();
String url;
int flag;//更新成功标志
if (file == null) {
return Result.error("405", "上传错误", null);
}
try {
byte[] bytes = file.getBytes();//将文件转化为 byte[] 格式
String name = UUID.randomUUID().toString().replace("-", "");//更改后的文件名
String ext = FilenameUtils.getExtension(file.getOriginalFilename());//获取文件后缀
String ur = name + "." + ext;
url = qiniuUtil.uploadBybyte(bytes, ur);
//将url更新为该用户的头像,更新数据库
flag = consumerService.updateAvator(userid, url);
if (flag == 1) {
return Result.success(url);
}
} catch (IOException e) {
e.printStackTrace();
}
//System.out.println(url + " 图片地址");
return Result.error("405", "更新失败", null);
}
}