oss上传封装及使用

oss在项目中好多地方会用到,不想每次都重复写这一段代码,所以进行了封装,在调用过程中,有什么新的需求再进行修改即可。

###封装代码

export function uploadOss(file,params){  //file为传过来的文件内容   params为额外参数
	return new Promise(function(resolve){
		let ossConfig;
		const UID = getUid();
                //对上传内容做尺寸大小限制
		const isJPG = file.file.type === 'image/jpeg';
		const isPNG = file.file.type === 'image/png';
		const isLt2M = file.file.size / 1024 / 1024 < 5;
		if (!isJPG && !isPNG) {
			message.error('只能上传jpg|png|jpeg');
			return;
		}else{
			if (!isLt2M) {
				message.error('图片尺寸必须小于 5MB!');
				return;
			}
		}
		let param_first = {
			uid:UID
		};
		let ossUrl = `********`;//需要上传的url根地址 可抽取出来 此处没有抽取
		request(ossUrl, {
			method: 'POST',
			headers: config.headers,
			body:config.parseJson(param_first)
		}).then((res) => {
			ossConfig = {
				policy:res.data.policy,
				OSSAccessKeyId:res.data.accessid,
				callback:res.data.callback,
				signature:res.data.signature,
				url:res.data.host,
				dir:res.data.dir,
			};
			const photo = file.fileList[0].originFileObj;  // 获取图片对象
			let pointIndex = photo.name.lastIndexOf('.');
			let suffixName = photo['name'].substring(pointIndex);//后缀名
			const photoName = moment().format('YYYYMMDDHHmmss') + (Math.floor(Math.random() * 3665668)) +  suffixName;  // 原图片的名称  随机生成  此处是纯数字  也可用字符串
			// const photoName = photo.name;  // 原图片的名称
			let key = `Uploads/ConsoleWechat/`;// 存储到oss的图片名称 自己定,必须确保唯一性,不然会覆盖oss中原有的文件
                        //区分不同的业务 上传不同的地址
			if(params && params.option == 'cover'){
				//直播封面图 Uploads/ConsoleWechat/用户id/PlayerCover/随机文件名.jpg
				key += `${UID}/PlayerCover/${photoName}`;
			}else{
				//报名表上传
				key += `${UID}/RTF/${photoName}`;
			}
			// let key = `Uploads/ConsoleWechat/${UID}/RTF/${photoName}`;  // 存储到oss的图片名称 自己定,必须确保唯一性,不然会覆盖oss中原有的文件
			const policy = ossConfig.policy; // 服务器端同事调oss的API,通过接口返回给前端的 policy
			const OSSAccessKeyId = ossConfig.OSSAccessKeyId;  // 服务器端同事调oss的API,通过接口返回给前端的 OSSAccessKeyId
			const callback = ossConfig.callback;  // 服务器端同事调oss的API,通过接口返回给前端的 callback。这个是需要 oss 触发这个回调来通知服务器操作结果。
			const signature = ossConfig.signature;  // 服务器端同事调oss的API,通过接口返回给前端的 signature。这个就是签名,最关键的。
			const url = ossConfig.url;
			const dir = ossConfig.dir;
			// biu一下,提交给oss
			let param = {
				name:photoName,
				key,
				policy:policy,
				OSSAccessKeyId:OSSAccessKeyId,
				success_action_status:'200',
				callback:callback,
				signature:signature,
				file:photo
			};
			const formData = new FormData();
			Object.keys(param).forEach((key) => {
			formData.append(key, param[key]);
			});
			request(url, {
				method: 'POST',
				headers: {
				},
				body: formData,
			}).then((res) => {
				resolve(res.data.data.full_url); //请求完之后再进行返回
			})
		});
	})
}

###调用

import {uploadOss} from '../../../utils/utils.js';
<Upload 
    name="qrcode" 
    listType="picture-card" 
    showUploadList="false" 
    className="picUpload"
    action=""
    beforeUpload={this.beforeUpload}
   onChange={this.uploadOptionPic}
    headers={config.headerAuth}
    showUploadList={false}
    accept=".png,.jpg,.jpeg,.gif"
>
      {coverPath ? <img src={coverPath} alt="封面图" style={{width:'100%',height:'100%',objectFit:'contain'}}/> : uploadButton}
</Upload>

//上传图片方法
uploadOptionPic = (file) =>{
        uploadOss(file).then((value)=>{
            this.setState({
                coverPath:value
            })
        })
 }
上一篇:react+antd的Upload上传文件至oss(上传文档转图片)


下一篇:图片上传-阿里云oss