【篇二】使用springboot+vue实现阿里云oss文件直传，解决大文件分片上传问题

本文主要是介绍【篇二】使用springboot+vue实现阿里云oss文件直传，解决大文件分片上传问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、前言

上一篇《使用springboot+vue实现阿里云oss上传》写了如何使用springboot+vue实现阿里云oss文件上传。这种方式虽然通用，但有个弊端就是当上传大文件时，容易导致文件还未上传完页面请求就超时了，如果想把oss的文件路径保存到数据库则无法实现。

针对这个阿里云也推出了直传的方式。这个方式避免文件传输到后台再转存到oss，大大缩减了上传时间，并且支持分片上传方式，对于大文件处理非常高效。

其整个流程是：前端通过后台请求OSS policy签名，前端拿到签名后直接把文件上传到阿里云oss，上传成功后OSS通过回调把上传结果返回给后端，下面我们来看具体实现。

二、前端实现逻辑

我们通过对上一篇的上传组件进行一个改造。
OssFileUpload组件

<template><div class="upload-file"><el-upload:multiple="multiple":accept="accept.join(',')"action="#":http-request="handleUpload":before-upload="handleBeforeUpload":file-list="fileList":limit="limit":on-exceed="handleExceed":show-file-list="false":data="data"class="upload-file-uploader"ref="fileUpload"><!-- 上传按钮 --><el-button size="mini" type="primary">选取文件</el-button><template v-if="multiple"> （按住Ctrl键多选）</template><!-- 上传提示 --><div class="el-upload__tip" slot="tip" v-if="showTip && fileList.length<=0">请上传<template v-if="limit"> 最多 <b style="color: #f56c6c">{{ limit }}个</b></template><template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template><template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>的文件</div></el-upload><!-- 文件列表 --><transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul" height="485"><li v-for="(file, index) in fileList" :key="file.uid || index "class="el-upload-list__item ele-upload-list__item-content"><el-link :href="file.url" :underline="false" target="_blank"><span class="el-icon-document"> {{ file.name }} </span></el-link><div class="ele-upload-list__item-content-action"><el-link :underline="false" @click="handleDelete(index)" type="danger" style="width: 50px">删除</el-link></div></li></transition-group></div>
</template><script>
import {handleMD5} from '@/utils/md5';
import {getOssPolicy} from "@/api/file";
import {POST} from "@/utils/request";
export default {name: "OssFileUpload",props: {// 是否可多选multiple: {type: Boolean,default: true,},// 值value: [String, Object, Array],// 数量限制limit: {type: Number,default: 5,},// 大小限制(MB)fileSize: {type: Number,default: 5,},// 文件类型, 例如['png', 'jpg', 'jpeg']fileType: {type: Array,default: () => ["doc", "xls", "xlsx", "ppt", "txt", "pdf"],},accept: {type: Array,default: () => [".doc", ".xls", ".xlsx", ".ppt", ".txt", ".pdf"],},// 是否显示提示isShowTip: {type: Boolean,default: true},// 是否重命名rename: {type: Boolean,default: false}},data() {return {number: 0,uploadList: [],fileList: [],data: {}};},watch: {value: {handler(val) {if (val) {let temp = 1;// 首先将值转为数组const list = Array.isArray(val) ? val : this.value.split(',');// 然后将数组转为对象数组this.fileList = list.map(item => {if (typeof item === "string") {item = {name: item.name, url: item.url};}item.uid = item.uid || new Date().getTime() + temp++;return item;});} else {this.fileList = [];return [];}},deep: true,immediate: true},rename: {handler(val) {this.data = {rename: val}},deep: true,immediate: true}},computed: {// 是否显示提示showTip() {return this.isShowTip && (this.fileType || this.fileSize);},},methods: {// 上传前校检格式和大小handleBeforeUpload(file) {// 校检文件类型if (this.fileType) {const fileName = file.name.split('.');const fileExt = fileName[fileName.length - 1];const isTypeOk = this.fileType.indexOf(fileExt) >= 0;if (!isTypeOk) {this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);return false;}}// 校检文件大小if (this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);return false;}}this.$modal.loading("正在上传文件，请稍候...");this.number++;return true;},// 文件个数超出handleExceed() {this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);},// 删除文件handleDelete(index) {this.fileList.splice(index, 1);this.$emit("input", this.listToString(this.fileList));},// 上传结束处理uploadedSuccessfully() {if (this.number > 0 && this.uploadList.length === this.number) {this.fileList = this.fileList.concat(this.uploadList);this.uploadList = [];this.number = 0;this.$emit("input", this.listToString(this.fileList));this.$modal.closeLoading();}},/** 上传按钮操作 */handleUpload (file) {// 计算文件的MD5，根据文件大小进行分片处理handleMD5(file.file).then(md5 => {const data = {fileName: file.file.name,md5: md5,rename: this.rename};getOssPolicy(data).then((response) => {let data = response.datalet formData = new FormData();formData.append('OSSAccessKeyId', data.accessKeyId);formData.append('signature', data.signature);formData.append('policy', data.policy);formData.append('key',data.filePath);formData.append('callback',data.callback);formData.append('success_action_status', 200);formData.append('file',file.file);POST(data.host, formData).then((res) => {let data = res.dataif (data.code !== 0) {this.$modal.msgError(data.msg);return;}this.uploadList.push({name: data.data.filename, url: data.data.url});this.uploadedSuccessfully();this.$modal.msgSuccess("上传成功");});});});},// 对象转成指定字符串分隔listToString(list, separator) {let strs = "";separator = separator || ",";for (let i in list) {strs += list[i].url + separator;}return strs != '' ? strs.substr(0, strs.length - 1) : '';}}
};
</script><style scoped lang="scss">
.upload-file-uploader {margin-bottom: 5px;
}.upload-file-list {max-height: 420px;overflow-y: auto;
}.upload-file-list .el-upload-list__item {border: 1px solid #e4e7ed;line-height: 2;margin-bottom: 10px;position: relative;
}.upload-file-list .ele-upload-list__item-content {display: flex;justify-content: space-between;align-items: center;color: inherit;
}.ele-upload-list__item-content-action .el-link {margin-right: 10px;
}
</style>

这里使用的是spark-md5来计算文件MD5，测试下来比crypto-js要快不少。

import SparkMD5 from 'spark-md5'// 计算md5
export function handleMD5(file) {return new Promise((resolve, reject) => {let start = new Date().getTime()const slice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSliceconst fileReader = new FileReader()//分片大小const chunkSize = 2097152//计算分片数const chunks = Math.ceil(file.size / chunkSize)let currentChunk = 0//注意点，网上都是 这一步都是有问题的， SparkMD5.ArrayBuffer()const spark = new SparkMD5.ArrayBuffer()fileReader.onload = function (e) {spark.append(e.target.result)currentChunk++if (currentChunk < chunks) {loadNext()} else {//计算后的结果const md5 = spark.end(false)        console.info('md5:' + md5)console.info("take:" + (new Date().getTime() - start) + "ms")resolve(md5)}}fileReader.onerror = function () {console.warn('FileReader error.')reject('compute file md5 error')}const loadNext = () => {const start = currentChunk * chunkSizeconst end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize// 注意这里的 fileRawfileReader.readAsArrayBuffer(slice.call(file, start, end))}loadNext()})
}

POST 的定义，使用axios

export const POST = async (url, form) => {try {return await axios.post(`${url}`, form);} catch (error) {return error;}
};

使用示例

<template><div class="app-container"><el-dialog title="文件上传" :visible.sync="open" width="700px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="120px"><el-form-item label="文件标识" prop="code"><el-input v-model="form.code" clearable maxlength="50" show-word-limit style="width: 250px"/></el-form-item><el-form-item label="是否重命名文件" prop="rename"><el-radio-group v-model="rename"><el-radio :label="false">否</el-radio><el-radio :label="true">是</el-radio></el-radio-group></el-form-item><el-form-item label="选择文件" prop="file" class="is-required"><!--只能上传1个最大100M的视频文件--><oss-file-upload ref="upload" :fileType="fileType" :accept="accept" :fileSize="100" :limit="1" :multiple="false" :value="form.files" :rename="rename"/></el-form-item><el-form-item label="备注" prop="remark"><el-input type="textarea" :rows="3" v-model="form.remark" clearable maxlength="500" show-word-limit/></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog></div>
</template><script>
import { add } from "@/api/xxx"; // 请求后台的接口封装
import OssFileUpload from "@/components/OssFileUpload";
export default {name: "demo",components: {OssFileUpload },data() {return {// 自定义允许上传的文件格式，也可以使用组件里面定义的默认格式fileType: ['avi', 'mp4', 'mov', 'wmv', 'flv', 'mpeg', 'webm'],accept: ['.avi', '.mp4', '.mov', '.wmv', '.flv', '.mpeg', '.webm'],// 是否重命名rename: false,// 表单参数form: {code: undefined,remark: undefined,url: undefined,files: []},// 表单校验rules: {code: [{required: true, message: "文件标识不能为空", trigger: "blur"}],files: [{type: 'array', required: true, message: "文件不能为空", trigger: "blur"}]}}},methods: {/** 提交按钮 */submitForm: function () {this.$refs["form"].validate(valid => {if (valid) {this.form.files = this.$refs.upload.fileListif (!Array.isArray(this.form.files) || this.form.files.length <= 0) {this.$alert("请上传附件");return false;}console.info(this.form)add(this.form).then(() => {this.$modal.msgSuccess("操作成功");this.open = false;});}});},            ...}
}
</script><style lang="scss" scoped>
::v-deep {.el-dialog__body {padding: 10px 10px 20px 10px;}
}
</style>

效果如下：
在这里插入图片描述
上传成功后再上传其他文件时效果

三、后端实现逻辑

controller

/*** 生成OSS policy** @param request 请求* @return 结果*/
@PostMapping("/policy")
public Result<OssPolicyInfo> generateOssPolicy(@RequestBody @Valid GetOssPolicyRequest request) {OssPolicyInfo ossPolicyInfo = ossService.getPolicy(request);return Result.success(ossPolicyInfo);
}/*** 文件上传到OSS的回调处理** @param servletRequest 回调request* @return 验证结果*/
@PostMapping("/oss/callback")
public Result callback(HttpServletRequest servletRequest) {//servletRequest -> mapMap<String, String> callbackMap = HttpRequestUtil.commonHttpRequestParamConvert(servletRequest);String filename = callbackMap.get("filename");String name = filename.substring(filename.lastIndexOf("/") + 1);//文件访问地址String url = ExternalUrl.OSS_HOST + "/" + filename;callbackMap.put("url", url);callbackMap.put("filename", name);return Result.success(callbackMap);
}

service

@Resource
private AliyunOssConfig config;private OSSClient getOSSClient() {return (OSSClient) new OSSClientBuilder().build(config.getEndPoint(), config.getKeyId(), config.getSecret());
}@Override
public OssPolicyInfo getPolicy(GetOssPolicyRequest request) {OSSClient ossClient = getOSSClient();try {Long fileId = new SnowFlakeGenerator().nextId();String fileName = request.getFileName();if (request.getRename()) {// 重命名fileName = fileId + "." + FilenameUtils.getExtension(fileName);}String filePath = String.format("file/%s", fileName);// 30s内上传有效long expireTime = 30;long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);// PostObject请求最大可支持的文件大小为1 GB，即CONTENT_LENGTH_RANGE为1024*1024*1024。PolicyConditions policyConditions = new PolicyConditions();policyConditions.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1073741824);policyConditions.addConditionItem(MatchMode.Exact, PolicyConditions.COND_KEY, filePath);String postPolicy = ossClient.generatePostPolicy(expiration, policyConditions);byte[] binaryData = postPolicy.getBytes(StandardCharsets.UTF_8);String encodedPolicy = BinaryUtil.toBase64String(binaryData);String postSignature = ossClient.calculatePostSignature(postPolicy);OssPolicyInfo ossPolicyInfo = new OssPolicyInfo().setAccessKeyId(config.getKeyId()).setPolicy(encodedPolicy).setSignature(postSignature).setFilePath(filePath).setHost(ExternalUrl.OSS_HOST) //OSS地址.setExpire(expireEndTime / 1000);//如果需要回调，默认为trueif (request.getNeedCallback()) {String callbackUrl = "/oss/callback";String callbackBody = String.format("filename=${object}&size=${size}&md5=%s", request.getMd5());JSONObject callback = new JSONObject();callback.put("callbackUrl", callbackUrl);callback.put("callbackBody", callbackBody);callback.put("callbackBodyType", "application/x-www-form-urlencoded");String encodedCallbackBody = BinaryUtil.toBase64String(callback.toString().getBytes());ossPolicyInfo.setCallback(encodedCallbackBody);}return ossPolicyInfo;} catch (Exception e) {log.error("Oss generate post policy fail");throw new ServerErrorException("服务器错误");} finally {ossClient.shutdown();}
}

AliyunOssConfig

@Data
@Configuration
@ConfigurationProperties(prefix = "aliyun.oss")
public class AliyunOssConfig {private String endPoint;private String keyId;private String secret;private String bucketName;
}

GetOssPolicyRequest

@Data
public class GetOssPolicyRequest {@NotBlankprivate String fileName;private String md5;private Boolean needCallback = true;private Boolean rename = false;
}