OSS文件上传

分片上传

1.OSS依赖

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

 

2.OSS官网提供的上传工具类

package com.bwie.shop.config;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.*;
import com.bwie.common.utils.R;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/*
*
* <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.10.2</version>
        </dependency>
        *
        *
      <el-upload action="http://localhost:88/api/shop/shop/upload" class="upload-demo"
                    :on-success="uploadFile" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
* */
@Component
public class OssUtils {


    public R uploadFile(MultipartFile file) {
        try {
            // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
            String endpoint = "https://oss-cn-shanghai.aliyuncs.com";
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
            String accessKeyId = "LTAI5tF2HrdAq5faRCRA9oVY";
            String accessKeySecret = "lXujPIUsCJBhvhF7CtruVLW6S4Y7DZ";
            String baseUrl = "https://gulimall-dhx.oss-cn-shanghai.aliyuncs.com/";

// 填写Bucket名称，例如examplebucket。
            String bucketName = "gulimall-dhx";
        //------------替换以上------------
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
            String format = simpleDateFormat.format(new Date());
            String dir = format+"/"; // 用户上传文件时指定的前缀。
// 填写Object完整路径，例如exampledir/exampleobject.txt。Object完整路径中不能包含Bucket名称。
            String objectName = dir+System.currentTimeMillis()+"_"+file.getOriginalFilename();

// 创建OSSClient实例。
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

// 创建InitiateMultipartUploadRequest对象。
            InitiateMultipartUploadRequest request = new InitiateMultipartUploadRequest(bucketName, objectName);

// 如果需要在初始化分片时设置文件存储类型，请参考以下示例代码。
// ObjectMetadata metadata = new ObjectMetadata();
// metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());
// request.setObjectMetadata(metadata);

// 初始化分片。
            InitiateMultipartUploadResult upresult = ossClient.initiateMultipartUpload(request);
// 返回uploadId，它是分片上传事件的唯一标识。您可以根据该uploadId发起相关的操作，例如取消分片上传、查询分片上传等。
            String uploadId = upresult.getUploadId();

// partETags是PartETag的集合。PartETag由分片的ETag和分片号组成。
            List<PartETag> partETags = new ArrayList<PartETag>();
// 每个分片的大小，用于计算文件有多少个分片。单位为字节。
            final long partSize = 1 * 1024 * 1024L;   //1 MB。
// 填写本地文件的完整路径。如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
            //文件大小
            Integer available = file.getInputStream().available();
            System.out.println(available);
           // final File sampleFile = new File("C:\\Users\\lcl\\Desktop\\上班\\js\\images\\f3.jpg");
            long fileLength = available.longValue();
            int partCount = (int) (fileLength / partSize);
            if (fileLength % partSize != 0) {
                partCount++;
            }
// 遍历分片上传。
            for (int i = 0; i < partCount; i++) {
                long startPos = i * partSize;
                long curPartSize = (i + 1 == partCount) ? (fileLength - startPos) : partSize;
                InputStream instream = file.getInputStream();
                // 跳过已经上传的分片。
                instream.skip(startPos);
                UploadPartRequest uploadPartRequest = new UploadPartRequest();
                uploadPartRequest.setBucketName(bucketName);
                uploadPartRequest.setKey(objectName);
                uploadPartRequest.setUploadId(uploadId);
                uploadPartRequest.setInputStream(instream);
                // 设置分片大小。除了最后一个分片没有大小限制，其他的分片最小为100 KB。
                uploadPartRequest.setPartSize(curPartSize);
                // 设置分片号。每一个上传的分片都有一个分片号，取值范围是1~10000，如果超出此范围，OSS将返回InvalidArgument错误码。
                uploadPartRequest.setPartNumber(i + 1);
                // 每个分片不需要按顺序上传，甚至可以在不同客户端上传，OSS会按照分片号排序组成完整的文件。
                UploadPartResult uploadPartResult = ossClient.uploadPart(uploadPartRequest);
                // 每次上传分片之后，OSS的返回结果包含PartETag。PartETag将被保存在partETags中。
                partETags.add(uploadPartResult.getPartETag());
            }


// 创建CompleteMultipartUploadRequest对象。
// 在执行完成分片上传操作时，需要提供所有有效的partETags。OSS收到提交的partETags后，会逐一验证每个分片的有效性。当所有的数据分片验证通过后，OSS将把这些分片组合成一个完整的文件。
            CompleteMultipartUploadRequest completeMultipartUploadRequest =
                    new CompleteMultipartUploadRequest(bucketName, objectName, uploadId, partETags);

// 如果需要在完成文件上传的同时设置文件访问权限，请参考以下示例代码。
// completeMultipartUploadRequest.setObjectACL(CannedAccessControlList.PublicRead);

// 完成上传。
            CompleteMultipartUploadResult completeMultipartUploadResult = ossClient.completeMultipartUpload(completeMultipartUploadRequest);
            System.out.println(completeMultipartUploadResult.getETag());
// 关闭OSSClient。
            ossClient.shutdown();
            return R.ok().put("url",baseUrl+objectName);
        }catch (Exception e){
            e.printStackTrace();
            return R.error();
        }

    }
}

 

3.具体的前后台实现

在vscode中form表单

       <el-form-item label="商品图片" prop="imgUrl">
                    <el-upload class="upload-demo" action="http://localhost:88/api/shop/shop/upload"
                        :file-list="fileList" list-type="picture" :on-success="onsuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>

vscode对应的要声明的属性

 fileList: []

 

需要提供的前台方法

               onsuccess(dom) {
                    console.log(dom)
                    //后台获取的数据在页面遍历
                    this.fileList.push({ name: "a.jpg", url: dom.url })
                    //存值到数据库
                    this.shop.imgUrl = dom.url
                },

 

table中显示图片的方式

   <el-table-column prop="imgUrl" header-align="center" align="center" label="商品图片">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <img width="150px" height="150px" :src="scope.row.imgUrl">
                </template>
            </el-table-column>

 

 

后台controller中上传文件的方法

   /**
     * 文件上传
     */
    @RequestMapping("/upload")
    public R upload(@RequestParam MultipartFile file){
        R r = ossUtils.uploadFile(file);
        return r;
    }