vue实现图片上传至阿里云OSS，返回前端页面展示

效果图：

表格

表单

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的响应给客户端。

方法细节：

1. 参数：方法接受一个MultipartFile类型的参数pictures，这通常表示客户端上传的文件。
2. 日志记录：在上传前和上传后，代码分别使用log.info记录了文件的原始文件名和上传后的URL。这有助于开发者跟踪和调试。
3. 文件上传：调用aliOSSUtils.upload(pictures)方法将文件上传到阿里云OSS。这里假设aliOSSUtils是一个工具类，提供了与阿里云OSS交互的静态方法。
4. 返回结果：文件上传成功后，方法返回一个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的路径返回
    }复制