ASP.NET Web API + VUE3 整合阿里云OSS，后端API生成预签名上传Url，前端VUE进行上传

1、后端API

我用的是.net sdk6，所以先安装了这个Aliyun.OSS.SDK.NetCore

 下面是后端生成上传Url的参考代码，主意request.ContentType，如果这里要是设置了，那么前端也要设置成一样的，如果前端是获取文件的contentType，可以传到后端来使用，我这里就没有进行设置，我目前只传图片。

objectKey是你要上传到的bucket下面的文件夹和你要指定的文件名。

主要是不想把这些key secret暴露在前端，这几个参数首先要保证正确。

private const string AccessKeyId = "你的";
private const string AccessKeySecret = "你的";
private const string Endpoint = "http://oss-cn-beijing.aliyuncs.com"; //改成你的
private const string BucketName = "你的";
/// 
/// 获取临时上传路径
/// 
/// 
[Route("get-oss-url"), HttpPost]
[Authorize]
public IActionResult GetUserList([FromBody] FileUploadModel model)
{
    OutResult outResult = new OutResult();
    var client = new OssClient(Endpoint, AccessKeyId, AccessKeySecret);
    // 设置 URL 的有效期（例如 10 分钟）
    var expiration = DateTime.Now.AddMinutes(15);
    var objectKey = $"{model.folder}/{ Guid.NewGuid().ToString()+".jpg" }";
    GeneratePresignedUriRequest request = new GeneratePresignedUriRequest(BucketName, objectKey, SignHttpMethod.Put);
    request.Expiration = expiration;
    //request.ContentType = "image/jpeg";
    var signedUrl = client.GeneratePresignedUri(request);
    // 生成签名 URL
    //var signedUrl = client.GeneratePresignedUri(BucketName, objectKey, expiration, SignHttpMethod.Put);
    outResult.data = signedUrl.ToString();
    return Ok(outResult);
}

2、前端VUE

主要是几点，

1、调用后端生成预签名的上传url的接口，得到预先签名上传url。

2、Content-Type的设置。

async function beforeUpload(file) {
  // 检查文件类型和大小
  var isImage = file.type.startsWith("image/");
  var isLt2M = file.size / 1024 / 1024  {
      uploadAction.value = res.data;
      console.log(uploadAction.value);
    })
    .catch(error => {
      message("获取上传路径失败", { type: "error" });
    });
  return isImage && isLt2M;
}
// 这里使用axios进行上传，如果后端使用的是put方法，这里也要用put方法
function handleUpload(options) {
  const { file } = options;
  try {
    // 使用 axios 或其他方式上传文件
    //const formData = new FormData();
    //formData.append("file", file);
    console.log(uploadAction.value);
    const response = axios.put(uploadAction.value, file, {
      headers: {
        "Content-Type": "" //image/jpeg
      }
    });
    // 上传成功，调用 onSuccess 回调
    options.onSuccess(response);
  } catch (error) {
    console.error("上传失败", error);
    options.onError();
  }
}
function handleSuccess(response, file, fileList) {
  console.log("文件上传成功", response);
}
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

          
            
          
          
            

3、阿里云oss的跨域设置

4、遇到的问题

1、遇到的第一个问题就是http://oss-cn-beijing.aliyuncs.com，这个地址用http还是https，这个和你前端需要一致，另外如果用https可能需要在oss配置证书，我嫌麻烦，没有测试，暂时直接使用了http。

2、从https改成http，就遇到了跨域的问题，然后就配置跨域。

3、跨域配置完，就遇到了上传403，说签名错误的问题，原来前端是new FormData();上传，后来改成直接传file，后端获取签名的时候也不指定ContentType，就好了。

4、图片可以上传了之后，发现在浏览器里面访问图片的时候不是预览而是下载，而vue里面访问直接就是403，我把防盗链的白名单加上了，因为是本地的测试，加的是localhost，图片在vue内可以显示了，在浏览器里还是下载，这个就先不管了。