springBoot+vue+elementUI+oss实现文件上传

上传文件

1.后端

1.导入依赖

<!--       文件上传下载-->
      <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>
      <dependency>
         <groupId>com.aliyun.oss</groupId>
         <artifactId>aliyun-sdk-oss</artifactId>
         <version>3.15.1</version>
      </dependency>

编写工具类

package com.wedu.modules.contracts.utils;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

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

/**
 * @author master
 */
@Component
public class FileUtils {

    private String endpoint = "";
    private String keyID = "";
    private String keySEcert = "";
    private String bucketName = "";

    //    https://dreams1.oss-cn-beijing.aliyuncs.com/WPS%E5%9B%BE%E7%89%87%281%29.jpeg
    public  String upload(MultipartFile file) throws IOException {
        // 获取上传的文件的输入流
        InputStream inputStream = file.getInputStream();

        // 避免文件覆盖
        String originalFilename = file.getOriginalFilename();
        String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));

        //上传文件到 OSS
        OSS ossClient = new OSSClientBuilder().build(endpoint, keyID, keySEcert);
        ossClient.putObject(bucketName, fileName, inputStream);

        //文件访问路径
        String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;
        // 关闭ossClient
        ossClient.shutdown();
        return url;
        // 把上传到oss的路径返回
    }

}

2.controller

@Autowired
private FileUtils fileUtils;

    /**
     * 文件上传
     */
    @PostMapping("/file/upload")
    public R imgUpload(MultipartFile file) throws IOException {
        log.info("照片上传，文件名：{}", file.getOriginalFilename());
        String url = fileUtils.upload(file);
        log.info("文件下载完成url：{}", url);
        return R.ok(url);
    }

2.前端

      <el-form-item label="文件">
        <el-upload
          name="file"
          class="upload-demo"
          drag
          multiple
          :action="uploadUrl"
          :headers="tokenInfo"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传word/pdf文件，且不超过10MB
          </div>
        </el-upload>

js

data(){
    return{
          uploadUrl: this.$http.adornUrl("/contracts/file/upload"),
          tokenInfo: {
            token: this.$cookie.get("token"),
          },
          imageUrl: "",
    }
},
methods:{

    //文件上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.dataForm.avatar = res.msg;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "application/msword";
      const isPNG =
        file.type ===
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!(isJPG || isPNG)) {
        this.$message.error("上传文件只能是 word 或者 pdf 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
}