实现原理:
给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控件,扩展性太差,自己又不去思考和总结,我们是程序的搬运工,但是我们也要成为一个合格的搬运工。