基于spring+vue把图片文件上传至阿里云oss容器并回显

前端

<el-upload class="avatar-uploader" action="/api/upload/avatar" :show-file-list="false"

:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="uploadHeaders"

:data="uploadData">

<el-button size="small" type="primary" icon="el-icon-camera">更换头像</el-button>

</el-upload>

属性解释

action="/api/upload/avatar" 点击文件后这个组件会自动发送/api/upload/avatar请求

:on-success="handleAvatarSuccess" 上传成功后调用的方法

:before-upload="beforeAvatarUpload" 上传前调用的方法

:headers="uploadHeaders" 请求头的设置

:data="uploadData" 请求携带除file外别的参数

后端

oss工具类

复制代码

public class ossUtil {

    // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
    final static String ENDPOINT = "https://oss-cn-hangzhou.aliyuncs.com";

    final static String OSS_ACCESS_KEY_ID = "********";

    final static String OSS_ACCESS_KEY_SECRET = "********";

    // 填写Bucket名称，例如examplebucket。
    final static String BUCKNAME = "campus-knowledge-payment";
    // 填写Bucket所在地域。以华东1（杭州）为例，Region填写为cn-hangzhou。
    final static String REGION = "cn-hangzhou";


    public static String uploadFile(String objectName, InputStream in) throws FileNotFoundException {


// 创建CredentialsProvider
        CredentialsProvider credentialsProvider = new DefaultCredentialProvider(OSS_ACCESS_KEY_ID, OSS_ACCESS_KEY_SECRET);


        // 创建OSSClient实例。
        // 当OSSClient实例不再使用时，调用shutdown方法以释放资源。
        ClientBuilderConfiguration clientBuilderConfiguration = new ClientBuilderConfiguration();
        clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);
        OSS ossClient = OSSClientBuilder.create()
                .endpoint(ENDPOINT)
                .credentialsProvider(credentialsProvider)
                .clientConfiguration(clientBuilderConfiguration)
                .region(REGION)
                .build();
        String url = "";

        try {
            // 填写字符串。
            String content = "Hello OSS，你好世界";

            // 创建PutObjectRequest对象。
            PutObjectRequest putObjectRequest = new PutObjectRequest(BUCKNAME, objectName, in);

            // 如果需要上传时设置存储类型和访问权限，请参考以下示例代码。
            // ObjectMetadata metadata = new ObjectMetadata();
            // metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());
            // metadata.setObjectAcl(CannedAccessControlList.Private);
            // putObjectRequest.setMetadata(metadata);

            // 上传字符串。
            PutObjectResult result = ossClient.putObject(putObjectRequest);
            url = "https://" + BUCKNAME +"."+ ENDPOINT.substring(ENDPOINT.lastIndexOf("/") + 1) + "/" + objectName;
            return url;
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        return url;
    }
}

这里

复制代码

ENDPOINT

复制代码

OSS_ACCESS_KEY_ID

复制代码

OSS_ACCESS_KEY_SECRET

复制代码

BUCKNAME

复制代码

REGION

要根据自己创建的oss bucket

controller类

复制代码

@PostMapping("/avatar")
public Result<String> upload(@RequestParam("file") MultipartFile file,
                             @RequestParam("userId") Integer userId) throws IOException {
    log.info("图片上传");
    String originalFilename = file.getOriginalFilename();
    String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));
    String url = ossUtil.uploadFile(fileName, file.getInputStream());
 
    return Result.success(url);
}