React 自定义上传头像到 OSS获取url

实现原理：

给input加ref，然后在你自定义样式的标签上面加点击事件，触发input的点击事件。

<div className={styles.avatar_content}>
  <span className={styles.avatar_text}>头像：</span>
  <div className={styles.avatar_contain_bg} onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut} onClick={() => uploadAvatar()}>

    <input
      type="file"
      accept=".jpg,.jpeg,.png"
      ref={fileAvatarRef}
      hidden
      onChange={(event) => handlePhoto(event)}
    />

    <img onClick={() => fileAvatarRef.current.click()} alt={"头像"} className={styles.avatar}
         src={require('../../../assets/setting/ava.png')}/>

  </div>

</div>

const fileAvatarRef = useRef();

handlePhoto方法

const handlePhoto = async (event) => {
  const files = [...event.target.files];
  if (files.length === 0) return;
  uploadAvatar(files[0]);
};

获取到 files数组文件路径集合。开始上传头像，通过接口上传到阿里云服务器，并返回相关的url

const uploadAvatar = (file) => {
  api.getOSSUploadSign('content/avatar/')
    .then((response) => {
      return response;
    }).then((result) => {
    uploadAvatarAliyun(result, file)
      .then((url) => {
        console.log('result：', url)

      }).catch((e) => {
        console.log('报错：', e)
      });
  }).catch(error => {
  }).finally(() => {
  });
};

其中file参数，file.size 是图片的大小字节数，可以通过计算 判断来限制你要上传的图片大小，
通过file.name 来判断图片名是否合法 ，因为有的图片名称如果含有特殊字符，是上传不成功的。所有时候也有必要进行校验。这里我就不补充代码了。

uploadAvatarAliyun方法，开始取出result中数据，通过拼接相关的请求参数，发起请求：

export const uploadAvatarAliyun = (data, file) => {

  return new Promise((resolve, reject) => {
    try {
      let request = new FormData();
      request.append('policy', data.policy);
      request.append('OSSAccessKeyId', data.accessid);
      request.append('success_action_status', '200');
      request.append('Signature', data.signature);
      let filetype = file.name.split('.').pop();
      let filename = Date.now() + '.' + filetype;
      request.append('key', data.dir + filename);
      request.append('Filename', data.dir + filename);
      request.append('name', filename);
      request.append('content-disposition', 'attachment; filename=' + file.name);
      request.append('file', file, filename);

      axios.post(data.host, request).then(res => {
        let path = data.host + "/" + data.dir + filename;
        reject(path)
      }).catch(res => {
        reject(res)
      })
    } catch (e) {
      reject('异常：' + data.host + "/" + data.dir + filename)
    }
  })
};

从而实现相关阿里云上传，前端很多小伙伴很多都不会使用，大多使用antd 的upload控件，扩展性太差，自己又不去思考和总结，我们是程序的搬运工，但是我们也要成为一个合格的搬运工。