表情包制作网站,与别人相比自己网站建设优势,互联网行业数据分析,保健品网站建设策划书在使用阿里云OSS进行前端直传时#xff0c;首先我们需要去阿里云官网注册自己的存储桶#xff0c;然后申请相关的accessKeyId和accessKeySecret#xff0c;然后新建一个桶#xff0c;为这个桶命名以及选择对应的地区。 然后可以根据自己的业务#xff0c;封装对应的组件首先我们需要去阿里云官网注册自己的存储桶然后申请相关的accessKeyId和accessKeySecret然后新建一个桶为这个桶命名以及选择对应的地区。 然后可以根据自己的业务封装对应的组件以下是根据我自己的项目所封装的上传组件所用的是React技术栈 import OSS from ali-oss; import { plus } from ../apis/person/index import styles from ./oss.module.less import { Input } from antd; import { useState } from react;const Oss () {const [resourcesName, setResourcesName] useState()const upload () {const client new OSS({region: , // 填写桶的地区accessKeyId: , // 桶的keyaccessKeySecret: , // 桶的secretbucket: dd-robot-react, // 桶的名称});const upload document.getElementById(upload);async function putObject(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 await plus({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 idfile typefile className{styles.file} /Inputvalue{resourcesName}onChange{(e) setResourcesName(e.target.value)}placeholder请输入文件名/button idupload onClick{upload} className{styles.btn} style{{ marginTop: 10 }}上传资源/button/) };export default Oss;