效果图：
表格
表单
vue前端上传图片
使用组件Element里面的upload上传，直接复用其代码岂可。
<el-form-item label="上传图片">
<!-- el-upload:组件实现自定义上传 -->
<!-- class="avatar-uploader":指定组件的样式类名 -->
<!-- action:上传的接口地址，必填的参数 -->
<!-- headers：上传请求的头部信息 -->
<!-- show-file-list="false：不显示文件列表 -->
<!-- on-success：文件上传成功时的钩子 -->
<!-- before-upload：上传文件之前的钩子，参数为上传的文件，
若返回 false 或者返回 Promise 且被 reject，则停止上传。 -->
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:headers="tokenInfo"
name="pictures"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
disabled
>
<!-- 根据 imageUrl 的值来显示上传的图片。 -->
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<!-- 如果没有图片，则显示一个加号图标。 -->
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<script>
export default {
data() {
return {
visible: false,
imageUrl: "", // 图片url
uploadUrl: this.$http.adornUrl("/cp/leave/upload"), // 上传url
tokenInfo: {
token: this.$cookie.get("token"), // token值 上传请求的头部信息
},
}
},
methods:{
// 文件上传成功时的钩子
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.leaveSystem.pictures = res.url // 这一步把url传到对应的表格字段里面
},
// 上传文件之前的钩
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
},
}
}
</script>将上传之后的url的数据返回到from表单页面
init(id) {
this.leaveSystem.id = id || 0;
this.visible = true;
this.$nextTick()
.then(() => {
this.$refs["leaveSystem"].resetFields();
})
// 数据回显
.then(() => {
if (this.leaveSystem.id) {
this.$http({
url: this.$http.adornUrl(
`/cp/leave/info/${this.leaveSystem.id}`
),
method: "get",
params: this.$http.adornParams(),
}).then(({ data }) => {
if (data && data.code === 0) {
this.leaveSystem.pictures = data.leave.pictures;
if(this.leaveSystem.pictures && this.dataForm.pictures.length!=0){
// 将返回的用户信息赋值给leaveSystem对象的各个属性，并且根据avatar属性设置imageUrl。
this.imageUrl = this.$http.adornUrl(this.leaveSystem.pictures);// 这一点如果图片展示不出来可以把this.$http.adornUrl删掉试试
}
}
});
}
});
},最后在表格上面回显数据
<el-table-column
prop="pictures"
label="图片"
header-align="center"
align="center"
width="220"
>
// 这里使用了一个卡槽进行数据回显存放
<template slot-scope="scope">
<img style="width: 100px; height: 100px" :src="scope.row.pictures">
</template>
</el-table-column>后端 OSS上传图片
这段代码定义了一个Spring Boot控制器中的方法，用于处理图片上传的请求。具体来说，当客户端向/upload这个端点发送一个POST请求，并附带一个或多个图片文件时，这个方法会被触发。
以下是该方法的简要说明：
方法功能：接收客户端上传的图片文件，并使用aliOSSUtils工具类将其上传到阿里云OSS（对象存储服务）。一旦文件成功上传，它会返回包含文件在OSS中的URL的响应给客户端。
方法细节：
- 参数：方法接受一个
MultipartFile类型的参数pictures，这通常表示客户端上传的文件。 - 日志记录：在上传前和上传后，代码分别使用
log.info记录了文件的原始文件名和上传后的URL。这有助于开发者跟踪和调试。 - 文件上传：调用
aliOSSUtils.upload(pictures)方法将文件上传到阿里云OSS。这里假设aliOSSUtils是一个工具类，提供了与阿里云OSS交互的静态方法。 - 返回结果：文件上传成功后，方法返回一个
R类型的对象（通常是一个自定义的响应类），其中包含了文件在OSS中的URL。这里使用了R.ok().put("url", url)来创建一个表示成功的响应，并将URL作为数据的一部分返回。
总结：这是一个典型的图片上传功能，它接收客户端上传的图片文件，将其保存到阿里云OSS，并返回文件的URL供客户端后续使用。
/**
* OSS上传图片
* @param pictures 图片
*/
@PostMapping("/upload")
public R upload(MultipartFile pictures) throws IOException {
String url = aliOSSUtils.upload(pictures);
return R.ok().put("url", url);
}阿里云OSS配置
1.配置项详解
- endpoint：这是OSS服务的访问点（Endpoint），客户端通过此Endpoint来访问存储在OSS上的数据。
- accessKeyId：Access Key ID是阿里云为用户提供的用于身份验证的ID。结合AccessKeySecret，可以访问和操作指定的OSS资源。
- accessKeySecret：AccessKey Secret是与AccessKey ID成对出现的密钥，用于签名请求，确保请求的合法性和安全性。
- bucketName：Bucket是OSS中用于存储数据的容器，每个Bucket都有唯一的名字。
2. 安全性提示
accessKeyId和accessKeySecret是敏感信息，应该妥善保管，避免泄露。在实际开发中，不应直接将这两个值硬编码在配置文件中，而应使用环境变量或安全的配置管理方式。
3. 总结
以上配置信息提供了与阿里云OSS服务进行交互所需的基本参数，包括访问点、身份验证信息和存储数据的Bucket名称。通过这些配置，可以安全地访问和操作存储在OSS上的数据。
以下代码直接复用即可
@Data
@Component
@ConfigurationProperties(prefix = "aliyun.oss")
public class AliOSSProperties {
private String endpoint;
private String accessKeyId;
private String accessKeySecret;
private String bucketName;
}
/**
* 实现上传图片到OSS
*/
public String upload(MultipartFile file) throws IOException {
// 获取阿里云OSS参数
String endpoint = aliOSSProperties.getEndpoint();
String accessKeyId = aliOSSProperties.getAccessKeyId();
String accessKeySecret = aliOSSProperties.getAccessKeySecret();
String bucketName = aliOSSProperties.getBucketName();
// 获取上传的文件的输入流
InputStream inputStream = file.getInputStream();
// 避免文件覆盖
String originalFilename = file.getOriginalFilename();
String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));
//上传文件到 OSS
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
ossClient.putObject(bucketName, fileName, inputStream);
//文件访问路径
String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;
// 关闭ossClient
ossClient.shutdown();
return url;// 把上传到oss的路径返回
}