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
})
})
}