当前位置:首页 » 文件传输 » oss上传文件进度条
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

oss上传文件进度条

发布时间: 2023-08-08 20:44:40

前端直接上传文件至OSS

解决的问题:当前端并发上传大量文件至服务器时,服务器带宽存在瓶颈,会影响上传速度

解决方案:使用STS临时访问凭证访问OSS

流程:

根据不同项目使用情况,向公司OSS管理员(杨坤)提供bucket信息,申请权限。具体包含以下内容:

前端在发起文件上传请求前,判断是否接近过期时间或已超过过期时间,并及时刷新临时访问凭证。

② iOS 关于OSS上传文件

1.安装OSS这些就不需要再说了,其次先让后台配置好一些参数,然后拿到后便可以直接使用了

目前用到的主要参数有以下三个:
ServerUrl
Endpoint
bucketName

2.直接在封装好的请求文件 CCNetworkRequstionMD5.m 里面,增加一个方法 ( 多种文件类型上传,传入你所需要的文件数组即可)

3.以下是在作业上传 .m 文件中的使用

在了解这方面的知识,找到了这一篇,借鉴了一下
https://blog.csdn.net/qq_33560608/article/details/88761764

③ oss上传速度跟服务器有关系吗

以下代码蔽尘使用分片上传的方式,可有效解决,OSS文件上传缓慢问题,但如果服务器的宽带过低还是会影响上传速度,可将服务器宽带提高,以提升速度
1.引入POM

<!--阿里云OSS-->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.9.1</version>
</dependency>

1
2
3
4
5
6
7
1
2
3
4
5
6
7
2.编写文件上传工具类

import com.alibaba.fastjson.JSONObject;
import com.aliyun.oss.ClientBuilderConfiguration;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.*;

import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.net.URL;
import java.text.SimpleDateFormat;
import java.util.*;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.TimeUnit;

/**
* 文件上传工具类
*/
public class FilesUploadUtil {

/**
* 获取上传结果
* @param newFile 上传文件
* @param folder 父级文件夹名称
* @return 文件访问路径
*/
public static JSONObject obtainTheFileUploadResult(MultipartFile newFile, String folder){
JSONObject result=new JSONObject();
JSONObject data=new JSONObject();
long startTime = System.currentTimeMillis();
try {

// MultipartFile 转 File
File file=multipartFileToFile(newFile);
//上传文件
String[] resultArr = uploadObject2OSS(file, folder);
if (resultArr != null) {
String path = resultArr[1];
//绝对路径,拼颤迅接CND加速域名,或自己的域名
data.put("src", "自己的公网IP".concat("/").concat(path));
//相对路径
data.put("relativePath", path);
result.put("msg", 1);
result.put("errorMessage", null);
}
// 删除本地临时文件
deleteTempFile(file);
} catch (RuntimeException e) {
e.printStackTrace();
result.put("msg", 0);
result.put("errorMessage", "文件大小不能超茄并此过9.7G");
data.put("src", null);
data.put("relativePath", null);
}catch (Exception e) {
result.put("msg", 0);
result.put("errorMessage", "上传错误:"+e.getMessage());
data.put("src", null);
data.put("relativePath", null);
}
result.put("data",data);
long endTime = System.currentTimeMillis();
System.out.println("------文件上传成功,耗时" + ((endTime - startTime) / 1000) + "s------");
return result;
}

/**
* 上传图片至OSS 文件流
*
* @param file 上传文件(文件全路径如:D:\\image\\cake.jpg)
* @param folder 阿里云API的文件夹名称(父文件夹)
* @return String 返回的唯一MD5数字签名
*/
public static String[] uploadObject2OSS(File file,String folder) throws Exception{
//获取OSS客户端对象
OSS ossClient=getOSSClient();
//OOS 桶名称 bucketName
String bucketName="自己阿里云的bucketName";
// 阿里OSS
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd");
Date date = new Date();
// 阿里云API的文件夹名称(子文件夹)
String format = dateFormat.format(date) + "/";
// 文件名
String formats =String.valueOf(UUID.randomUUID());
// 创建一个可重用固定线程数的线程池
ExecutorService executorService = Executors.newFixedThreadPool(5);
String[] resultArr = new String[2];
try {
// 分片上传
folder =folder +"/"+ format;
// 文件名
String fileName = file.getName();
// 文件扩展名
String fileExtension = fileName.substring(fileName.lastIndexOf("."));
// 最终文件名:UUID + 文件扩展名
fileName = formats + fileExtension;
// 上传路径 如:appversion/20200723/a3662009-897c-43ea-a6d8-466ab8310c6b.apk
// objectName表示上传文件到OSS时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg
String objectName = folder + fileName;
System.out.println("文件路径--》》"+objectName);
// 文件大小
long fileSize = file.length();
// 创建上传Object的Metadata
ObjectMetadata metadata = new ObjectMetadata();
// 指定该Object被下载时的网页的缓存行为
metadata.setCacheControl("no-cache");
// 指定该Object下设置Header
metadata.setHeader("Pragma", "no-cache");
// 指定该Object被下载时的内容编码格式
metadata.setContentEncoding("utf-8");
// 文件的MIME,定义文件的类型及网页编码,决定浏览器将以什么形式、什么编码读取文件。如果用户没有指定则根据Key或文件名的扩展名生成,
// 如果没有扩展名则填默认值application/octet-stream
metadata.setContentType(getContentType(fileExtension));
// 指定该Object被下载时的名称(指示MINME用户代理如何显示附加的文件,打开或下载,及文件名称)
metadata.setContentDisposition("filename/filesize=" + fileName + "/" + fileSize + "Byte.");
// 创建对象
request = new (bucketName, objectName, metadata);
// 初始化分片
InitiateMultipartUploadResult upresult = ossClient.initiateMultipartUpload(request);
// 返回uploadId,它是分片上传事件的唯一标识,您可以根据这个uploadId发起相关的操作,如取消分片上传、查询分片上传等
String uploadId = upresult.getUploadId();
// partETags是PartETag的集合。PartETag由分片的ETag和分片号组成
List<PartETag> partETags = Collections.synchronizedList(new ArrayList<>());
// 计算文件有多少个分片
final long partSize = 1 * 1024 * 1024L; // 1MB
long fileLength = file.length();
int partCount = (int) (fileLength / partSize);
if (fileLength % partSize != 0) {
partCount++;
}
if (partCount > 10000) {
throw new RuntimeException("文件过大");
}
// 遍历分片上传
for (int i = 0; i < partCount; i++) {
long startPos = i * partSize;
long curPartSize = (i + 1 == partCount) ? (fileLength - startPos) : partSize;
int partNumber = i + 1;
// 实现并启动线程
executorService.execute(new Runnable() {
@Override
public void run() {
InputStream inputStream = null;
try {
inputStream = new FileInputStream(file);
// 跳过已经上传的分片
inputStream.skip(startPos);
UploadPartRequest uploadPartRequest = new UploadPartRequest();
uploadPartRequest.setBucketName(bucketName);
uploadPartRequest.setKey(objectName);
uploadPartRequest.setUploadId(uploadId);
uploadPartRequest.setInputStream(inputStream);
// 设置分片大小。除了最后一个分片没有大小限制,其他的分片最小为100 KB。
uploadPartRequest.setPartSize(curPartSize);
// 设置分片号。每一个上传的分片都有一个分片号,取值范围是1~10000,如果超出这个范围,OSS将返回InvalidArgument的错误码。
uploadPartRequest.setPartNumber(partNumber);
// 每个分片不需要按顺序上传,甚至可以在不同客户端上传,OSS会按照分片号排序组成完整的文件。
UploadPartResult uploadPartResult = ossClient.uploadPart(uploadPartRequest);
//每次上传分片之后,OSS的返回结果会包含一个PartETag。PartETag将被保存到PartETags中。
synchronized (partETags) {
partETags.add(uploadPartResult.getPartETag());
}
} catch (IOException e) {
e.printStackTrace();
} finally {
if (inputStream != null) {
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
});
}
// 等待所有的分片完成
// shutdown方法:通知各个任务(Runnable)的运行结束
executorService.shutdown();
while (!executorService.isTerminated()) {
try {
// 指定的时间内所有的任务都结束的时候,返回true,反之返回false,返回false还有执行完的任务
executorService.awaitTermination(5, TimeUnit.SECONDS);
} catch (InterruptedException e) {
System.out.println(e.getMessage());
}
}
// 立即关闭所有执行中的线程
// executorService.shutdownNow();

// 验证是否所有的分片都完成
if (partETags.size() != partCount) {
throw new IllegalStateException("文件的某些部分上传失败!");
}
// 完成分片上传 进行排序。partETags必须按分片号升序排列
Collections.sort(partETags, new Comparator<PartETag>() {
@Override
public int compare(PartETag o1, PartETag o2) {
return o1.getPartNumber() - o2.getPartNumber();
}
});
// 创建对象
// 在执行完成分片上传操作时,需要提供所有有效的partETags。OSS收到提交的partETags后,会逐一验证每个分片的有效性。当所有的数据分片验证通过后,OSS将把这些分片组合成一个完整的文件
= new (bucketName, objectName, uploadId, partETags);
// 设置文件访问权限
// .setObjectACL(CannedAccessControlList.PublicRead);
// 完成上传
CompleteMultipartUploadResult completeMultipartUploadResult = ossClient.completeMultipartUpload();
if (completeMultipartUploadResult != null) {
// 解析结果
resultArr[0] = completeMultipartUploadResult.getETag();
resultArr[1] = objectName;
return resultArr;
}
} catch (Exception e) {
e.printStackTrace();
System.out.println("上传阿里云OSS服务器异常." + e.getMessage());
} finally {
// 关闭OSSClient
ossClient.shutdown();
}
return null;
}

/**
* MultipartFile 转 File
*
* @param file
* @throws Exception
*/
public static File multipartFileToFile(MultipartFile file) {
try {
File toFile;
if (file != null && file.getSize() > 0) {
InputStream ins = null;
ins = file.getInputStream();
toFile = new File(file.getOriginalFilename());
inputStreamToFile(ins, toFile);
ins.close();
return toFile;
}
return null;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}

/**
* 获取流文件
*
* @param ins
* @param file
*/
public static void inputStreamToFile(InputStream ins, File file) {
try {
OutputStream os = new FileOutputStream(file);
int bytesRead;
byte[] buffer = new byte[8192];
while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
os.write(buffer, 0, bytesRead);
}
os.close();
ins.close();
} catch (Exception e) {
e.printStackTrace();
}
}

/**
* 获取阿里云OSS客户端对象
*
* @return ossClient
*/
public static OSS getOSSClient() {
ClientBuilderConfiguration conf = new ClientBuilderConfiguration();
// 连接空闲超时时间,超时则关闭
conf.setIdleConnectionTime(1000);

return new OSSClientBuilder().build("自己阿里云的endpoint", "自己阿里云的access_key_id", "自己阿里云的access_key_secret", conf);
}

/**
* 获得url链接
*
* @param bucketName 桶名称
* @param key Bucket下的文件的路径名+文件名 如:"appversion/20200723/a3662009-897c-43ea-a6d8-466ab8310c6b.apk"
* @return 图片链接:http://xxxxx.oss-cn-beijing.aliyuncs.com/test/headImage/1546404670068899.jpg?Expires=1861774699&OSSAccessKeyId=****=p%2BuzEEp%2F3JzcHzm%2FtAYA9U5JM4I%3D
* (Expires=1861774699&OSSAccessKeyId=LTAISWCu15mkrjRw&Signature=p%2BuzEEp%2F3JzcHzm%2FtAYA9U5JM4I%3D 分别为:有前期、keyID、签名)
*/
public static String getUrl(String bucketName, String key) {
// 设置URL过期时间为10年 3600L*1000*24*365*10
Date expiration = new Date(System.currentTimeMillis() + 3600L * 1000 * 24 * 365 * 10);
OSS ossClient = getOSSClient();
// 生成URL
URL url = ossClient.generatePresignedUrl(bucketName, key, expiration);
return url.toString().substring(0, url.toString().lastIndexOf("?"));
}

/**
* 删除本地临时文件
*
* @param file
*/
public static void deleteTempFile(File file) {
if (file != null) {
File del = new File(file.toURI());
del.delete();
}
}

/**
* 通过文件名判断并获取OSS服务文件上传时文件的contentType
*
* @param fileExtension 文件名扩展名
* @return 文件的contentType
*/
public static String getContentType(String fileExtension) {
// 文件的后缀名
if (".bmp".equalsIgnoreCase(fileExtension)) {
return "image/bmp";
}
if (".gif".equalsIgnoreCase(fileExtension)) {
return "image/gif";
}
if (".jpeg".equalsIgnoreCase(fileExtension) || ".jpg".equalsIgnoreCase(fileExtension)
|| ".png".equalsIgnoreCase(fileExtension)) {
return "image/jpeg";
}
if (".html".equalsIgnoreCase(fileExtension)) {
return "text/html";
}
if (".txt".equalsIgnoreCase(fileExtension)) {
return "text/plain";
}
if (".vsd".equalsIgnoreCase(fileExtension)) {
return "application/vnd.visio";
}
if (".ppt".equalsIgnoreCase(fileExtension) || "pptx".equalsIgnoreCase(fileExtension)) {
return "application/vnd.ms-powerpoint";
}
if (".doc".equalsIgnoreCase(fileExtension) || "docx".equalsIgnoreCase(fileExtension)) {
return "application/msword";
}
if (".xml".equalsIgnoreCase(fileExtension)) {
return "text/xml";
}
if (".mp4".equalsIgnoreCase(fileExtension)) {
return "video/mp4";
}
// android
if (".apk".equalsIgnoreCase(fileExtension)) {
return "application/vnd.android.package-archive";
}
// ios
if (".ipa".equals(fileExtension)) {
return "application/vnd.iphone";
}
// 默认返回类型
return "application/octet-stream";
}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
3.controller编写

/**
* 上传文件
*
* @param file 文件
* @return
* @throws IOException
*/
@ResponseBody
@RequestMapping(value = "/urevf", method = RequestMethod.POST, proces = "application/json;charset=UTF-8")
public JSONObject uploadRealEstateVideoFiles(@RequestParam(value = "file") MultipartFile file) throws IOException {
//此处的video_file为阿里云OSS上最外层文件夹,自己新建即可
return FilesUploadUtil.obtainTheFileUploadResult(file, "video_file");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

④ oss自定义域名文件上传

oss自定义域名文件上传步骤如下:
1、登录OSS管理控制台。
2、单击Bucket列表,然后单击目标Bucket名称。
3、选择文件管理>文件管理,单击上传文件。
4、在上传文件页面,完成基础配置项。
5、单击上传文件,此时,可以在上传列表页签查看各个文件的上传进度。上传完成后,可以在目标路径下查看上传文件的文件名、文件大小以及存储类型等信息。

⑤ 小白使用阿里云的oss实现文件云存储

项目需要上传头像,不想存在本地,之前用过阿里云其他产品,这里就使用一下阿里云的oss了,不得不说阿里云的产品使用步骤真的很清晰.这里说一下我自己的使用步骤.

选择对象存储oss,进行开通

开通不要钱,有一定免费额度

权限可以设置为公共读

其实也就是两步
1.引pom

2.复制黏贴大法

由于阿里云一些密钥配置和地域结点,bucket等是常量级的,所以我这里抽取出来放在了application.properties中, 方便管理 ,数据我手动加密了....大家换成自己的即可,
这些配置key=value key都是自己随便写的(也不是,起码可以见名思意),只是为了我们配置的一个配置类可以利用spring的依赖注入填充value而已

说明:

说明:
我们阿里云oss仓库的url是一个咱们的仓库+固定的地域结点值+咱们的文件名字,所以这里为了使上传的文件名字不重复,使用了一个idworker,不知道的可以看一下 Twitter的 Snowflake(雪花算法)

大家搭建完了可以用postman测试一下

ps:如果我们想方便管理或者后期扩展,我们这里也可以引入一个工具

我们可以用这个工具的一个方法String dirpath=new DateTime().tostring("yyyy/MM/dd");将当前的时间转换为yyyy/MM/dd的格式,比如2020/02/03
这样我们上传的文件名字时候可以以这个dirpath作为我们的图片所在的文件夹名称,以分布式id生成器生成的id为名称存储.

下面看一下效果

⑥ 阿里云oss 前端+后台方式-前端部分el-upload

axios封装接口为异步请求,使用el-upload默认上传,在before-upload里请求需要使用同步,保证先获取token再上传。

1.过期时间设置久一点,默认 30s 。
2.本地连接测试去掉 callback ,不然就会报错 private adress ... 。
3. key 格式为 dir 值加filename即 xxx/a.png ,格式不对会被处理成上传内容为空,存不进去,返回码正确。
4.设置 succes_action_status 为200,默认返回204。
5.保证 file 在提交内容中是最后一个。

⑦ vue 上传文件到 阿里云OSS,并获取上传进度

1.首先,安装阿正绝尺里的包

初始化举高一下配置,传的参数data从后台获取

2.使用element-ui的Upload作为上传组件,http-request 来绑定自定义上传的方宏备法Upload,action写为空。 :before-upload="beforeUpload" 表示在上传前做的事情,绑定了方法beforeUpload,我们可以在这个方法里获取所需要的一些信息,比如签名等等

data 例子如下

3.methods
从后台获取第一步所需的数据

上传方法

至此,上传完成

⑧ 阿里云OSS服务,怎么做上传进度包括大文件和小文件。

是使用PHP吗?如果是的话你可以先获取到要上传的文件大小然后根据发送了多少得出百分比。具体OSS怎么操作我不清楚,但是进度的话你可以这么做:
<?php

ob_start();

echo <<<EOT

<div style="width:80%;height:30px;margin:120px auto;border:solid 1px #CCC;">
<div id="load" style="width:0px;height:30px;background-color:#F00;"></div>
</div>

<script type="text/javascript">
function upload(load){
document.getElementById("load").style.width = load;
}
</script>
EOT;
ob_flush(); //这个必不可少
flush();

for($i=0;$i<=20;$i++){
//这个是计算出百分比的
$by = sprintf('%.0f%%',$i/20*100);
echo str_pad('<script>upload("'.$by.'");</script>', 4096);
ob_flush();
flush();
sleep(1); //暂停一秒
}

//运行之后就可以出现上传的进度条了,OSS我不知道怎么操作不过这段代码或许对你有帮助!

?>