在做前端开发的时候，经常会遇到需要上次大文件的情况，这个时候，如果是先上传到服务器，在从服务器上传到阿里云OSS，就会很慢，而且可能在上传到服务器的时候，系统就卡死了。
这个时候，可以考虑直接传到阿里云OSS，然后保存文件地址就可以了。
Thinkphp后端源代码：
public function oss() {// 配置信息（建议从配置文件中读取）$accessKeyId = 'LTAI5tMWerwssrsLjmZVu';$accessKeySecret = 'zwCcidsdeeefsfsdfsdfQ8o3BmIl';$endpoint = 'oss-cn-chengdu.aliyuncs.com';$bucket = 'doddcdeeeeped';// 生成上传策略$dir = 'videos/'; // 上传目录$callbackUrl = request()->domain() . '/oss/callback'; // 上传回调地址// 生成唯一文件名（可根据需要调整）$fileName = $dir . uniqid() . '.' . pathinfo(request()->param('filename'), PATHINFO_EXTENSION);// 构造回调参数$callback_param = ['callbackUrl' => $callbackUrl,'callbackBody' => 'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}','callbackBodyType' => 'application/x-www-form-urlencoded'];$callback_string = json_encode($callback_param);$base64_callback_body = base64_encode($callback_string); // 构造上传策略$policy = ['expiration' => date('Y-m-d\TH:i:s\Z', strtotime('+1 hour')), // 1小时后过期'conditions' => [['content-length-range', 0, 104857600], // 最大100MB['starts-with', '$key', $dir]]];$policy = json_encode($policy);$base64_policy = base64_encode($policy);$signature = base64_encode(hash_hmac('sha1', $base64_policy, $accessKeySecret, true)); // 返回前端所需参数return json(['accessid' => $accessKeyId,'policy' => $base64_policy,'signature' => $signature,'key' => $fileName,'host' => "https://{$bucket}.{$endpoint}",'callback' => $base64_callback_body]); }
前端代码：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>视频直传阿里云OSS</title><script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> </head> <body><h1>视频上传</h1><input type="file" id="video-file" accept="video/*"><button id="upload-btn">上传</button><div id="progress-container" style="display: none;"><progress id="upload-progress" value="0" max="100"></progress><span id="progress-text">0%</span></div><div id="result"></div><script>$(function() {$('#upload-btn').click(function() {const fileInput = $('#video-file')[0];if (fileInput.files.length === 0) {alert('请选择视频文件');return;}const file = fileInput.files[0];// 检查文件大小（可选）if (file.size > 100 * 1024 * 1024) { // 100MB alert('文件大小不能超过100MB');return;}// 显示进度条 $('#progress-container').show();$('#result').empty();// 1. 获取OSS上传凭证 $.ajax({url: '/common/config/config/oss',type: 'GET',data: {filename: file.name},dataType: 'json',success: function(response) {// 2. 构造表单数据 const formData = new FormData();formData.append('key', response.key);formData.append('policy', response.policy);formData.append('OSSAccessKeyId', response.accessid);formData.append('signature', response.signature);formData.append('callback', response.callback);formData.append('file', file);// 3. 上传到OSS $.ajax({url: response.host,type: 'POST',data: formData,processData: false,contentType: false,xhr: function() {const xhr = new XMLHttpRequest();xhr.upload.addEventListener('progress', function(e) {if (e.lengthComputable) {const percent = Math.round((e.loaded / e.total) * 100);$('#upload-progress').val(percent);$('#progress-text').text(percent + '%');}}, false);return xhr;},success: function(result) {// 这里实际上OSS会回调我们设置的callback URL// 前端这里只是显示上传完成，实际业务处理在callback方法中 $('#result').html('<p>上传成功！文件正在处理中...</p>');},error: function(xhr, status, error) {$('#result').html('<p style="color:red;">上传失败: ' + error + '</p>');}});},error: function(xhr, status, error) {$('#result').html('<p style="color:red;">获取上传凭证失败: ' + error + '</p>');}});});});</script> </body> </html>
此时，可能会出现跨域报403的错误：
请求报错：
这个时候需要设置跨域：设置位置：
参考：
https://developer.aliyun.com/article/1560819
解决方法：在OSS控制台创建跨域规则
1. 登录OSS管理控制台。
2. 单击Bucket列表，然后单击目标Bucket名称。
3. 在左侧导航栏，选择数据安全>跨域设置。
4. 在跨域设置页面，单击创建规则。
5. 在创建跨域规则面板，将来源设置为*，允许Methods全部勾选，允许Headers设置为*，暴露Headers设置为ETag和x-oss-request-id，缓存时间设置为0，选中返回Vary: Origin，然后单击确定。关于如何设置跨域规则，请参见设置跨域访问。
在创建跨域规则弹窗中，
将来源设置为*
允许Methods全部勾选
允许Headers设置为*
暴露Headers设置为ETag和x-oss-request-id
缓存时间设置为0
选中返回Vary: Origin。
这里可以设置为【*】表示允许所有，如果要设置某个域名，需要带【http/https】比如：http://*.domain.com
打完收工！