保姆级SpringBoot+Vue图片上传到阿里云OSS教程

---

前言

有关阿里云OSS我就不做过多介绍了，想了解的小伙伴点击下方链接叭

阿里云对象存储OSS地址

阿里云对象存储OSS开发文档地址

---

1、导入OSS依赖

<!--阿里云OSS-->
 <dependency>
     <groupId>com.aliyun.oss</groupId>
     <artifactId>aliyun-sdk-oss</artifactId>
     <version>3.10.2</version>
 </dependency>

 <!-- 日期工具栏依赖 -->
 <dependency>
     <groupId>joda-time</groupId>
     <artifactId>joda-time</artifactId>
     <version>2.9.3</version>
 </dependency>

---

2、配置配置文件

进入阿里云控制台（鼠标放在头像上就可以看见）

endpoint：

---

3、后端代码

controller

@RestController
@RequestMapping("/oss")
public class OssController {
    
    

    @Autowired
    private OssService ossService;

    //上传图片的方法
    @PostMapping("policy/uploadAvator")
    public Result uploadOssFile(@RequestParam("file") MultipartFile file,
                                @RequestParam("module") String module) {
    
    
        //获取上传文件 MultipartFile
        InputStream inputStream = null;
        try {
    
    
            inputStream = file.getInputStream();
        } catch (IOException e) {
    
    
            e.printStackTrace();
        }
        String url = ossService.uploadFileAvatar(inputStream,module,file.getOriginalFilename());

        return Result.success("文件上传成功",url);
    }


}

OssService

public interface OssService {
    
    
    String uploadFileAvatar(InputStream inputStream, String module, String originalFilename);
}

OssServiceImpl

@Service
public class OssServiceImpl implements OssService {
    
    

    @Override
    public String uploadFileAvatar(InputStream inputStream,String module,String originalFilename) {
    
    
        //工具类获取值
        String endpoint = ConstantPropertiesUtils.END_POINT;
        String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;


        //创建OSS实例
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        String folder = new DateTime().toString("yyyy/MM/dd");
        String fileName = UUID.randomUUID().toString();
        String fileExtension = originalFilename.substring(originalFilename.lastIndexOf("."));
        // oss中的文件夹名
        String objectName = module + "/" + folder + "/" + fileName + fileExtension;

        // 创建上传文件的元信息，可以通过文件元信息设置HTTP header(设置了才能通过返回的链接直接访问)。
        //如果不设置，直接访问url会自行下载图片，看各位自己选择
        ObjectMetadata objectMetadata = new ObjectMetadata();
        objectMetadata.setContentType("image/jpg");

        ossClient.putObject(bucketName, objectName, inputStream,objectMetadata);

        // 关闭OSSClient。
        ossClient.shutdown();

        String url = "http://"+bucketName+"."+endpoint+"/"+objectName;
        return url;
    }
}

工具类获取配置文件中的值

@Component
public class ConstantPropertiesUtils implements InitializingBean {
    
    

    //读取配置内容
    @Value("${aliyun.oss.file.endpoint}")
    private String endpoint;

    @Value("${aliyun.oss.file.keyid}")
    private String keyid;

    @Value("${aliyun.oss.file.keysecret}")
    private String keysecret;

    @Value("${aliyun.oss.file.bucketname}")
    private String bucketname;


    //定义公开的静态常量
    public static String END_POINT;
    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;
    public static String BUCKET_NAME;

    @Override
    public void afterPropertiesSet() throws Exception {
    
    
        END_POINT = endpoint;
        ACCESS_KEY_ID = keyid;
        ACCESS_KEY_SECRET = keysecret;
        BUCKET_NAME = bucketname;

    }
}

---

4、前端代码

上传组件代码

  //action="https://jsonplaceholder.typicode.com/posts/"
 <el-upload
  class="avatar-uploader"
  action="上传地址"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="tableData.avator" :src="tableData.avator" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

回调函数

 	  //文件上传成功
      handleAvatarSuccess(res, file) {
        this.$message.success("图片修改成功！")
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      //限制用户上传的图片格式和大小
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isLt2M;
      }

---

本篇博文到此结束，觉得不错的小伙伴可以一键三连哦！，感谢支持！！！

Java学习路线目录索引