当前位置：首页 > wzjs >正文

浏览器怎么打开网站电子商务网站建设与维护总结

wzjs 2025/9/17 7:29:48

浏览器怎么打开网站,电子商务网站建设与维护总结,成都品牌营销策划有限公司,企业网站创建步1、后端API 我用的是.net sdk6，所以先安装了这个Aliyun.OSS.SDK.NetCore 下面是后端生成上传Url的参考代码，主意request.ContentType，如果这里要是设置了，那么前端也要设置成一样的，如果前端是获取文件的contentType&…

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 = "你的";/// <summary>
/// 获取临时上传路径
/// </summary>
/// <returns></returns>
[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 < 2;if (!isImage) {this.$message.error("只能上传图片文件");}if (!isLt2M) {this.$message.error("图片大小不能超过 2MB");}//这里调用后端生成上传url的接口，赋值给了uploadActionawait getOssUploadUrl({folder: "goods"}).then(res => {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;
};<el-form-item label="商品图片" label-width="100"><el-uploadv-model:file-list="fileList":http-request="handleUpload"list-type="picture-card":before-upload="beforeUpload":on-success="handleSuccess":on-preview="handlePictureCardPreview":on-remove="handleRemove"><el-icon><Plus /></el-icon></el-upload><el-dialog v-model="dialogVisible"><img w-full :src="dialogImageUrl" alt="Preview Image" /></el-dialog></el-form-item>