Vue elementUI上传文件到OSS服务器，后端（java）(配图文)_elementui文件上传后端

OSS配置

---

首先去阿里云官网，开通并配置OSS服务

进入对象存储OSS，创建一个Bucket(记录下Endpoint,后端配置连接OSS时会使用到)

在新创建的Bucket中测试上传文件是否可用

前往阿里云的访问控制新建一个子用户

注意：

子用户创建成功切记复制AccessKey ID 与 AccessKey Secret

并保存起来，否则退出后无法再获取到这些信息。只能重新创建新的子用户。

创建完成后，为该子用户添加权限

到这一步，OSS服务就算开通完毕了。

后端配置

---

接下来是java的后端的配置以及与OSS服务器的连接了。

pom.xml添加以下依赖

<aliyun.oss.version>3.8.0</aliyun.oss.version>
<jodatime.version>2.10.1</jodatime.version>
​
<!--日期时间工具-->
<dependency>
    <groupId>joda-time</groupId>
    <artifactId>joda-time</artifactId>
    <version>${jodatime.version}</version>
</dependency>
<!--aliyunOSS-->
<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>${aliyun.oss.version}</version>
</dependency>

在配置文件application.yaml中配置OSS属性

config:
  oss:
    endpoint: oss-cn-hangzhou.aliyuncs.com
    keyid: 存放前面创建子用户的参数AccessKey ID
    keysecret: 存放前面创建子用户的参数AccessKey Secret 
    #bucket可以在控制台创建，也可以使用java代码创建
    bucketname: 存放所创建的Bucket名称

接下来创建配置类

@Data
@Component
@ConfigurationProperties(prefix="config.oss")
publicclassOssConfig {
    privateStringendpoint;
    privateStringkeyid;
    privateStringkeysecret;
    privateStringbucketname;
}

添加service的实现类

@Service
publicclassFileServiceImpl{
    @Autowired
    privateOssConfigossConfig;
    
    publicStringupload(InputStreaminputStream, Stringmodule, StringoriginalFilename) {
        // 获得oss 服务器的信息
        Stringendpoint=ossConfig.getEndpoint();
        Stringkeyid=ossConfig.getKeyid();
        Stringkeysecret=ossConfig.getKeysecret();
        Stringbucketname=ossConfig.getBucketname();
​
        //判断oss实例是否存在：如果不存在则创建，如果存在则获取
        OSSossClient=newOSSClientBuilder().build(endpoint, keyid, keysecret);
        if (!ossClient.doesBucketExist(bucketname)) {
            //创建bucket
            ossClient.createBucket(bucketname);
            //设置oss实例的访问权限：公共读
            ossClient.setBucketAcl(bucketname, CannedAccessControlList.PublicRead);
        }
        //构建日期路径：avatar/2020/08/11/文件名
        Stringfolder=newDateTime().toString("yyyy/MM/dd");
        //文件名：uuid.扩展名
        StringfileName=UUID.randomUUID().toString();
        StringfileExtension=originalFilename.substring(originalFilename.lastIndexOf("."));
        Stringkey=module+"/"+folder+"/"+fileName+fileExtension;
        //文件上传至阿里云
        ossClient.putObject(ossConfig.getBucketname(), key, inputStream);
        // 关闭OSSClient。
        ossClient.shutdown();
        //返回url地址
        return"https://"+bucketname+"."+endpoint+"/"+key;
    }
}

最后进行测试

@ApiOperation("文件上传")
@PostMapping("/upload")
publicRupload(
        @ApiParam(value="文件", required=true)
        @RequestParam("file") MultipartFilefile,
        @ApiParam(value="模块", required=true)
        @RequestParam("module") Stringmodule) throwsIOException {
    // 获得上传文件的 InputStream
    InputStreaminputStream=file.getInputStream();
    // 获得上传文件的名字
    StringoriginalFilename=file.getOriginalFilename();
    StringuploadUrl=fileService.upload(inputStream, module, originalFilename);
    //返回r对象
    returnnewR(ResponseEnum.SUCCESS,uploadUrl);
}

在swagger上进行测试

到这里后端测试完毕。

前端配置

---

前端采用vue实现

// 文件上传组件
// http://localhost:8100/upload?module=avatar 路径为后端上传文件的接口
<el-uploadclass="avatar-uploader"action="http://localhost:8100/upload?module=avatar"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <imgv-if="imageUrl"
               :src="imageUrl"
               class="avatar">
          <iv-else
             class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

    // method中的方法
    // 上传成功后
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    // 可能URL.createObjectURL(file.raw);会出现路径错误
    // 可以替换为：this.imageUrl = res.data;
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 <2;
      if(!isJPG){
        this.$message.error('上传头像图片只能是 png 格式!');
      }
      if(!isLt2M){
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      returnisJPG&&isLt2M;
    },

到这里elementUI上传文件到OSS服务器就基本完成了。

记得点赞，收藏，关注！