Vue怎么使用Upload组件将图片上传到阿里云OSS，并返回图片URL

_周周

已于 2024-03-30 13:12:50 修改

阅读量1.1k

点赞数 30

文章标签： vue.js 阿里云前端 elementui springboot

于 2024-03-30 12:55:57 首次发布

本文链接：https://blog.csdn.net/None_ones/article/details/137169244

版权

基于前端用Vue2后端用Springboot进行讲解

一、创建阿里云OSS

对象存储 OSS_云存储服务_企业数据管理_存储-阿里云 (aliyun.com)，打开网站进行开通

开通后我们来到Bucket列表，创建Bucket

创建过程：后面就默认就行了

创建完成后我们获取上传所需要的数据，bucketName、endpoint、 accessKeyId、 accessKeySecret

buckerName就是刚刚创建Bucket的名字

endpoint在Bucket的概述里，我们点进去就能看见

accessKeyId和accessKeySecret需要我们去验证索取，我们把鼠标悬浮到右上角的头像去会有一个弹出层，点击accessKey进去就可以获取

阿里云的OSS的所需的数据我们以及获取完了，接下来我们一起来看下代码

二、Vue前端

我们先来看下前端代码

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-success="handleUploadSuccess">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleUploadSuccess1(response) {
        // 在这里可以从 response 中获取上传成功后的 URL
        console.log('上传成功', response);
      }
    }
  }
</script>

<el-upload>就是上传组件，action是上传图片的后端接口，当选择照片后会自动上传并返回响应结果

:on-preview是查看上传成功的照片

:on-remove是移除上传成功的照片

:on-success是图片上传成功后的调用函数，通常会在函数里获取响应结果的Url

三、SpringBoot后端

后端我就直接上代码了

首先在yml文件加上阿里云OSS的配置

再在xml文件中加入阿里云OSS的依赖

        <!--       阿里云OSS -->
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.15.1</version>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>dysmsapi20170525</artifactId>
            <version>2.0.9</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.aliyun/aliyun-java-sdk-core -->
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
            <version>4.1.1</version>
        </dependency>

Controller层

package com.water.Controlller;


import com.water.Pojo.Result;
import com.water.Service.UploadService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;


@RestController
@CrossOrigin("你的前端url")
@Slf4j
public class UploadController {
    //阿里云存储文件
    @Autowired
    private UploadService uploadService;
    @PostMapping("/Upload")
    public Result upload(MultipartFile file) throws IOException {
        log.info("上传文件，文件名称：{}",file.getOriginalFilename());
        //调用阿里云OSS工具类，将上传上来的文件存入阿里云
        //上传文件到阿里云oss  获取上传文件
        String url = uploadService.upload(file);
        //将图片上传完成后的url返回，用于浏览器回显展示
        System.out.println(url);
        return Result.success(url);
    }
}

Service层

package com.water.Service;

import org.springframework.web.multipart.MultipartFile;

public interface UploadService {
    //上传文件到阿里云oss
    String upload(MultipartFile file);
}

ServiceImpl层

package com.water.Service.ServiceImpl;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.water.OSS.ConstantOssPropertiesUtils;
import com.water.Service.UploadService;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;

@Service
public class UploadServiceImpl implements UploadService {


    @Override
    public String upload(MultipartFile file) {
        // Endpoint以杭州为例，其它Region请按实际情况填写。
        String endpoint = ConstantOssPropertiesUtils.EDNPOINT;
        String accessKeyId = ConstantOssPropertiesUtils.ACCESS_KEY_ID;
        String accessKeySecret = ConstantOssPropertiesUtils.SECRECT;
        String bucketName = ConstantOssPropertiesUtils.BUCKET;
        try {
            // 创建OSSClient实例。
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
            // 上传文件流。
            InputStream inputStream = file.getInputStream();
            String fileName = file.getOriginalFilename();
            //生成随机唯一值，使用uuid，添加到文件名称里面
            String uuid = UUID.randomUUID().toString().replaceAll("-","");
            fileName = uuid+fileName;
            //按照当前日期，创建文件夹，上传到创建文件夹里面
            //  2021/02/02/01.jpg
            String timeUrl = new DateTime().toString("yyyy/MM/dd");
            fileName = timeUrl+"/"+fileName;
            System.out.println(bucketName);
            System.out.println(fileName);
            System.out.println(inputStream);

            //调用方法实现上传
            ossClient.putObject(bucketName, fileName, inputStream);
            // 关闭OSSClient。
            ossClient.shutdown();
            //上传之后文件路径
            // https://  yygh-lxyk   .oss-cn-beijing.aliyuncs.com      /01.jpg
            String url = "https://"+bucketName+"."+endpoint+"/"+fileName;
            //返回
            System.out.println(url);
            return url;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }
}

我的Result类（放在实体类中）

package com.water.Pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
    private Integer code;//响应码，1 代表成功; 0 代表失败
    private String msg;  //响应信息 描述字符串
    private Object data; //返回的数据

    //增删改 成功响应
    public static Result success(){
        return new Result(1,"success",null);
    }
    //查询 成功响应
    public static Result success(Object data){
        return new Result(1,"success",data);
    }
    //失败响应
    public static Result error(String msg){
        return new Result(0,msg,null);
    }
}

这样便能实现ElementUpload组件上传照片了