在使用阿里云OSS进行前端直传时，首先我们需要去阿里云官网注册自己的存储桶，然后申请相关的accessKeyId和accessKeySecret，然后新建一个桶，为这个桶命名以及选择对应的地区。
然后可以根据自己的业务，封装对应的组件，以下是根据我自己的项目，所封装的上传组件，所用的是React技术栈
importOSSfrom"ali-oss";import{ plus }from'../apis/person/index'import styles from'./oss.module.less'import{ Input }from"antd";import{ useState }from"react";constOss=()=>{const[resourcesName, setResourcesName]=useState('')constupload=()=>{const client =newOSS({region:"",// 填写桶的地区accessKeyId:"",// 桶的keyaccessKeySecret:"",// 桶的secretbucket:"dd-robot-react",// 桶的名称});const upload = document.getElementById("upload");asyncfunctionputObject(data: any){try{const options ={meta:{temp:"demo"},mime:"json",headers:{"Content-Type": file.type
},};const result =await client.put(data.name, data, options)
console.log(result);
console.log(result.url);const ossDomain ="dd-robot-react.oss-cn-beijing.aliyuncs.com";// 替换为你的实际OSS域名const fileUrl =`https://${ossDomain}/${data.name}`;
console.log(fileUrl);let res =awaitplus({data_link: result.url,data_name: resourcesName,type:3})
console.log(res);}catch(e){
console.log(e);}}
upload.addEventListener("click",()=>{const data = file.files[0];
console.log(data.name);putObject(data);});}return(<><input id="file" type="file" className={styles.file}/><Input
value={resourcesName}
onChange={(e)=>setResourcesName(e.target.value)}
placeholder="请输入文件名"/><button id="upload" onClick={upload} className={styles.btn} style={{marginTop:10}}>上传资源</button></>)};exportdefault Oss;
下边的代码部分是分片上传内容，通常在上传内容较大的时候会使用分片上传，代码部分如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><title>Document</title></head><body><button id="submit">上传</button><input id="file" type="file"/><!--导入sdk文件--><script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script><script type="text/javascript">const client =newOSS({// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。region:"oss-cn-beijing",// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。accessKeyId:"",accessKeySecret:"",// 填写Bucket名称，例如examplebucket。bucket:"",});const headers ={// 指定该Object被下载时的网页缓存行为。"Cache-Control":"no-cache",// 指定该Object被下载时的名称。"Content-Disposition":"example.txt",// 指定该Object被下载时的内容编码格式。"Content-Encoding":"utf-8",// 指定过期时间，单位为毫秒。Expires:"1000",// 指定Object的存储类型。"x-oss-storage-class":"Standard",// 指定Object标签，可同时设置多个标签。"x-oss-tagging":"Tag1=1&Tag2=2",// 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。"x-oss-forbid-overwrite":"true",};// 指定上传到examplebucket的Object名称，例如exampleobject.txt。// const name = "exampleobject.txt";// 获取DOM。const submit = document.getElementById("submit");const options ={// 获取分片上传进度、断点和返回值。progress:(p, cpt, res)=>{
console.log(p);},// 设置并发上传的分片数量。parallel:4,// 设置分片大小。默认值为1 MB，最小值为100 KB。partSize:1024*100,// headers,// 自定义元数据，通过HeadObject接口可以获取Object的元数据。meta:{year:2020,people:"test"},mime:"text/plain",};// 监听按钮。
submit.addEventListener("click",async()=>{try{const data = document.getElementById("file").files[0];const fileName = data.name;// 分片上传。const res =await client.multipartUpload(fileName, data,{...options,// 设置上传回调。// 如果不涉及回调服务器，请删除callback相关设置。// callback: {// // 设置回调请求的服务器地址。// url: "http://examplebucket.aliyuncs.com:23450",// // 设置回调请求消息头中Host的值，即您的服务器配置Host的值。// host: "yourHost",// /* eslint no-template-curly-in-string: [0] */// // 设置发起回调时请求body的值。// body: "bucket=${bucket}&object=${object}&var1=${x:var1}",// // 设置发起回调请求的Content-Type。// contentType: "application/x-www-form-urlencoded",// customValue: {// // 设置发起回调请求的自定义参数。// var1: "value1",// var2: "value2",// },// },});
console.log(res);}catch(err){
console.log(err);}});</script></body></html>
本文转载自: https://blog.csdn.net/qq_60754128/article/details/136199759
版权归原作者 I will.874 所有， 如有侵权，请联系我们删除。
版权归原作者 I will.874 所有， 如有侵权，请联系我们删除。