阿里云oss上传步骤
- 调用服务端接口uploadPost(),将相应参数传过去。
- 服务端拿到相应数据,调用oss服务完成签名等信息,返回相应数据。
- 拿到oss返回的数据,地址、签名、文件路径等信息,进行接口调用数据开始上传。
- 上传结束后调用验证接口,查看是否上传成功。
代码如下
const customRequest = async ({ file }) => {
let dtype = checkImg( file)
setIsUploadStart(false)
uploadPost({
fileName: file.name,
fileSize:file.size,
targetType:'COURSE_PICTURE',
targetId: targetId || '0',
fileType:dtype,
isPublic:isPublic
}).then((res)=>{
let { data } = res
let formDate = new FormData()
formDate.append("key", data.fileKey)
formDate.append("OSSAccessKeyId", data.accessId)
formDate.append("dir", data.dir)
formDate.append("policy", data.policy)
formDate.append("signature", data.signature)
formDate.append("file", file)
axios.post(`${data.accessHost}`, formDate, {
headers: {
"Content-Type": "multipart/form-data",
"x-requested-with": ''
},
onUploadProgress: (progressEvent) =>{
const { total, loaded } = progressEvent;
let per = parseInt(loaded / total * 100)
setPercent(per)
},
}).then(res => {
uploaSuccessdPost({
fileId:data.fileId
}).then((res)=>{
setTextName(file.name)
success([file.name,data.fileId)
setUploadSuccess(true)
}).catch((error)=>{
setIsUploadFail(true)
})
}).catch((error)=>{
setIsUploadFail(true)
})
})
}
