【避坑指“难”】React实现阿里云oss上传文件代码示例

在utils中封装下列方法

oss基础配置

export const ossConfig = () => {
    
    
  return {
    
    
    OSSAccessKeyId: '你的OSSAccessKeyId',
    AccessKeySecret: '你的AccessKeySecret',
    expire: 87600 //过期时间
  }

上传文件的方法

export const uploadFile=(file:any)=>{
    
    
  const OSSAccessKeyId = ossConfig().OSSAccessKeyId;
  const host = ossConfig().host;
  const hostAddr = ossConfig().hostAddr;
  const policy = getPolicyBase64(); 
  const signature = getSignature(policy);
  const expire = ossConfig().expire;
  const filename = file.name;
  var dataFrame = {
    
    
    OSSAccessKeyId: OSSAccessKeyId,
    host: host,
    hostAddr:hostAddr,
    policy: policy,
    signature: signature,
    expire: expire,
    filename: filename,
    dir: "notarization/", //oss文件夹名称
  };
  uploadAvatarAliyun(dataFrame, file).then((url) => {
    
    
    console.log("url", url);
  });
  //上传完后拼接完整的oss可访问地址
  console.log('addr',dataFrame.hostAddr  + dataFrame.dir + dataFrame.filename)
  return dataFrame.hostAddr  + dataFrame.dir + dataFrame.filename;
}};

export const uploadAvatarAliyun = (data:any, file:any) => {
    
    
  return new Promise((resolve, reject) => {
    
    
    try {
    
    
      let requestData = new FormData();
      requestData.append('policy', data.policy);
      requestData.append('OSSAccessKeyId', data.OSSAccessKeyId);
      requestData.append('success_action_status', '200');
      requestData.append('Signature', data.signature);
      requestData.append('key', data.dir + data.filename);
      requestData.append('Filename', data.filename );
      requestData.append('name', data.filename);
      requestData.append('content-disposition', 'attachment; filename=' + file.name);
      requestData.append('file', file, data.filename);
      console.log('requestData',requestData)
      request("https://test-eagle.oss.XXXX.com", {
    
     //请求oss地址
        data:requestData,
        headers: {
    
     'content-type': 'application/x-www-form-urlencoded' },
        method: 'POST',
      }).then((res:any) => {
    
    
        let path = data.host + "/" + data.dir + data.filename;
        console.log('path',path)
        reject(path)
      }).catch((res:any) => {
    
    
        reject(res)
      })
    } catch (e) {
    
    
      reject('异常：' + data.host + "/" + data.dir )
    }
  })
};

生成policy

export const getPolicyBase64 = () => {
    
    
  let date = new Date();
    date.setHours(date.getHours() + ossConfig().expire);
    let srcT = date.toISOString();
    const policyText = {
    
    
      "expiration": srcT,
      "conditions": [
        ["content-length-range", 0, 100 * 1024 * 1024] //支持文件最大大小
      ]
    };
    const policyBase64 = Base64.encode(JSON.stringify(policyText));
    return policyBase64;
};

生成签名

export const getSignature = (policy: any) => {
    
    
  const accesskey = ossConfig().AccessKeySecret;
  return Crypto.enc.Base64.stringify(Crypto.HmacSHA1(policy, accesskey));
};

实际调用该方法实现oss上传文件

<div>
	<input
		type="file"
        title=" "
        id="uploadFile"
        accept="image/*"
        onChange={
    
    handleUploadFile}
        style={
    
    {
    
     overflow: "hidden" }}/>
</div>

 const [uploadUrl, setUploadUrl] = useState<any>({
    
    });
 const [uploadUrlName, setUploadUrlName] = useState<any>({
    
    });
 
 const handleUploadFile = (e: any) => {
    
    
    const {
    
     files } = e.target;
    setUploadUrl(uploadFile(files[0])); //上传文件
    setUploadUrlName(files[0].name); //获取文件名
  };