回答

前端js

try {
  

               获取 OSS 配置
                    const res = await fetch(`/后端url`);

                    if (!res.ok) throw new Error('获取OSS配置失败');
                    let responsedata= await res.json();

                    if(responsedata.err){
                        alert(responsedata.data);
                        return;
                    }
                    console.log(responsedata);
                    ossConfig.value=responsedata.data;
                    console.log('OSS配置加载成功', ossConfig.value.dir);

                    if (!ossConfig.value) throw new Error('OSS配置无效');

                    // 3. 构造 FormData 直接上传到 OSS
                    // 为了避免重名，加上时间戳前缀
                    const key = ossConfig.value.dir + Date.now() + '_' + fileToUpload.name;
                    const formData = new FormData();
                    formData.append('key', key);
                    formData.append('policy', ossConfig.value.policy);
                    formData.append('OSSAccessKeyId', ossConfig.value.accessid);
                    formData.append('signature', ossConfig.value.signature);
                    formData.append('success_action_status', '200');
                   formData.append('callback', ossConfig.value.callback); 
                    formData.append('file', fileToUpload);

                    const resp = await fetch(ossConfig.value.host, { method: 'POST', body: formData });
                   const resp_data= await resp.json();
                    if ( resp_data.status=="success") {
                        const url = `${ossConfig.value.host}/${key}`;
                        return url;
                    } else {


alert( 'OSS上传失败'+resp_data.message);
                    //    console.error('OSS上传失败', text);
                        throw new Error('上传云端失败: ' + resp.status);
                    }

                } catch (e) {
                    console.error("上传流程异常:", e);
                    return null;
                }

后端获取oss配置与回调代码

点击查看全文

 $id = '';//阿里云accessid
 $key = '';
$host = 'https://绑定oss的定义域名';

        $callbackUrl = "https://回调地址/Callback";




        $callback_param = array('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);
        $now = time();
        $expire = 5; //设置该policy超时时间是10s. 即这个policy过了这个有效时间，将不能访问
        $end = $now + $expire;
        $expiration = $this->gmt_iso8601($end);

        $dir ="ossfolder/".date("Y-m-d/H/");

        //最大文件大小.用户可以自己设置
        $condition = array(0 => 'content-length-range', 1 => 0, 2 => 204800);//200kb
        $conditions[] = $condition;

        //表示用户上传的数据,必须是以$dir开始, 不然上传会失败,这一步不是必须项,只是为了安全起见,防止用户通过policy上传到别人的目录
        $start = array(0 => 'starts-with', 1 => '$key', 2 => $dir);

        $conditions[] = $start;




        $arr = array('expiration' => $expiration, 'conditions' => $conditions);

        $policy = json_encode($arr);
        $base64_policy = base64_encode($policy);
        $string_to_sign = $base64_policy;
        $signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true));

        $response = array();
        $response['accessid'] = $id;
        $response['host'] = $host;
        $response['policy'] = $base64_policy;
        $response['signature'] = $signature;
        $response['expire'] = $end;
        $response['callback'] = $base64_callback_body;
        //这个参数是设置用户上传指定的前缀
        $response['dir'] = $dir;

        echo json_encode(["err" => false, 'code' => 200,
            "data" => $response]);

$filename = $_POST['filename'];
$allowed = ['jpg', 'jpeg', 'png'];
$ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
if (!in_array($ext, $allowed)) {
    
    echo '{"status":"fail","message":"格式不对"}';
return;
}
echo '{"status":"success","message":"OK"}';
return;