文件上传到服务器（保姆级别）

最新推荐文章于 2024-09-23 16:05:40 发布

黑帽子X

最新推荐文章于 2024-09-23 16:05:40 发布

阅读量1.8k

点赞数 37

本文链接：https://blog.csdn.net/weixin_52872685/article/details/134887402

版权

服务器专栏收录该内容

2 篇文章 1 订阅

订阅专栏

说明：

本功能用到了：vue3 + element-plus + 阿里云对象存储OSS + springboot

（补充）：用element-ui或者普通表单都行，只要满足上传文件的三要素就行，然后正确连接后端接口就行

虽然用到的东西很多，但是不难，别被吓倒偶~

接下来进入正题：

1 进入阿里云开通对象存储OSS（免费试用一个月）

点击进入：阿里云官网

开通对象存储OSS

登录注册后点击左上角搜索，然后开通：

开通后进入点击创建OSS Bucket：

给Bucket起个名称，然后修改读写权限为公共读，然后点击确定：

创建成功后点击进入，然后选择概览：

这里会有一个Endpoint（地域节点），注：后端需要用到

创建AccessKey

然后鼠标滑到右上角头像，点击AccessKey管理，进入后点击创建AccessKey：

验证之后会显示你的AccessKey的ID和Secret，后端需要用到，这个很重要，你可以下载保存起来

2 前端代码

element-plus的安装

前提是安装了element-plus：

npm install element-plus --save
yarn：yarn add element-plus
pnpm：pnpm install element-plus

前端代码：

在element-plus的官网中找到upload组件：

点击进入：element-plus upload

我们要用到的为用户头像这一个，复制代码：

以下为源码，源码用到了TypeScript，如果没有项目没有选择TypeScript,那要对他进行改造：

源码如下：

1 主体部分

<el-upload
      class="avatar-uploader"
      :show-file-list="false"
      :auto-upload='true'
      :on-success="handleAvatarSuccess"
      name="file"
      :on-change="onSelectFile"
      action="你的后端接口"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
      <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
    </el-upload>

action属性：连接你的后端接口

:auto-upload：是否开启自动上传

:on-success：上传成功后执行的钩子方法

:on-change:文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用（本次主要是实现上传后预览的功能）

2 js部分

<script setup>
const imageUrl = ref('')
import { Plus } from '@element-plus/icons-vue'
const onSelectFile = (uploadFile) =>{
      imageUrl.value = URL.createObjectURL(uploadFile.raw)
    }
</script>

通过:on-change的这个钩子方法返回了一个url，然后赋值给inageUrl，上传后在主体部分，就可以通过img标签预览了

3 style样式部分

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

3 后端代码

这个在对象存储OSS的SDK下载中的帮助文档是有的，不过需要对代码进行改造，下面是改造后的源码及过程：

1 引入依赖

        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.15.1</version>
        </dependency>

        <dependency>
            <groupId>javax.xml.bind</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.3.1</version>
        </dependency>
        <dependency>
            <groupId>javax.activation</groupId>
            <artifactId>activation</artifactId>
            <version>1.1.1</version>
        </dependency>
        <!-- no more than 2.3.3-->
        <dependency>
            <groupId>org.glassfish.jaxb</groupId>
            <artifactId>jaxb-runtime</artifactId>
            <version>2.3.3</version>
        </dependency>

2 配置代码：

package com.example.xingyuecarrental.config;

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import com.aliyun.oss.model.PutObjectRequest;
import com.aliyun.oss.model.PutObjectResult;

import java.io.InputStream;

public class Upload {
    // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
    private static final String END_POINT = "https://oss-cn-beijing.aliyuncs.com";
    // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
    //EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
    private static final String ACCESS_KEY_ID="";
    private static final String ACCESS_KEY_SECRET="";
    // 填写Bucket名称，例如examplebucket。
    private static final String BUCKET_NAME = "";
    public static String uploadFiles(String objectName, InputStream in) throws Exception {

        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(END_POINT,ACCESS_KEY_ID,ACCESS_KEY_SECRET);
        String url ="";
        try {
            // 填写字符串。
            String content = "Hello OSS，你好世界";

            // 创建PutObjectRequest对象。
            PutObjectRequest putObjectRequest = new PutObjectRequest(BUCKET_NAME, 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://" +BUCKET_NAME + "." + END_POINT.substring(END_POINT.lastIndexOf("/")+1)+"/"+objectName;
        } 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;
    }
}

注意：以下四处配置你自己的信息，END_POINT中将oss-cn-beijing.aliyuncs.com去掉填写自己的Endpoint（地域节点），ACCESS_KEY_ID填写你所保存的AccessKey的ID，ACCESS_KEY_SECRET处填写你所保存的AccessKey的Secret，BUCKET_NAME填写你所创建的Bucket名称

private static final String END_POINT = "https://oss-cn-beijing.aliyuncs.com";
// 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
private static final String ACCESS_KEY_ID="";
private static final String ACCESS_KEY_SECRET="";
// 填写Bucket名称，例如examplebucket。
private static final String BUCKET_NAME = "";

3 接口代码

@PostMapping("/image")
    public Result upload(MultipartFile file) throws Exception {
            String originalFilename = file.getOriginalFilename();
            String image = UUID.randomUUID().toString() + originalFilename;
            String imageurl = Upload.uploadFiles(image, file.getInputStream());
            System.out.println(imageurl);
            return Result.success(imageurl);
    }

为了防止图片的名称重复导致上传的文件被覆盖，所以使用了UUID生成了一个随机的名称进行上传，这时你可将真正的文件地址返回给前端或者进行保存到数据库的操作。

4 在yml文件中配置文件上传的大小

spring:
  servlet:
    multipart:
      max-file-size: 2MB
      max-request-size: 2MB

注意yml文件的格式

以上就是全部的内容啦，快点学起来吧！

黑帽子X

关注

37
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录