[英]How to upload local video file to Google Cloud
I am stuck with a file upload process in a react app.我在反应应用程序中遇到了文件上传过程。 In the app, I am trying to upload local video files to
Google Cloud Storage
.在应用程序中,我正在尝试将本地视频文件上传到
Google Cloud Storage
。
I take the input file from:我从以下位置获取输入文件:
<input type={`file`} accept=".mp4" onChange={VideoSelectChangeFunc} />
In VideoSelectChangeFunc
, I get the local URL of the input file by,在
VideoSelectChangeFunc
中,我通过以下方式获取输入文件的本地 URL ,
let file = URL.createObjectURL(event.target.files[0])
Then I use it in axios
to send to cloud然后我在
axios
中使用它发送到云端
export const UploadVideo = async (file, signedurl, asset_uuid) => {
let resultState = { state: '', data: {} };
await axios({
method: 'put',
url: signedurl,
data: file,
headers: {
'Content-Type': 'application/octet-stream',
},
}).then(function (response) {
resultState.state = 'success';
resultState.data = response.data
}).catch(function (error) {
resultState.state = 'error';
resultState.data.message = error.message;
window.toastr.error(error.message);
console.log(error)
})
return resultState;
}
What I see on cloud is:我在云上看到的是:
blob:http://localhost:3000/9b650cbf-8b49-440b-9e90-da6bdb5d392a
This is just the local URL of the file as string but not the video itself, when I copy and paste it on browser I can see the video.这只是文件的本地 URL 作为字符串,而不是视频本身,当我将其复制并粘贴到浏览器上时,我可以看到视频。 I searched the situation and saw
'Content-Type': 'blob'
would solve the problem.我搜索了情况,发现
'Content-Type': 'blob'
可以解决问题。 However, we are checking headers in our CORS Policy
, so it has to be 'Content-Type': 'application/octet-stream'
.但是,我们正在检查
CORS Policy
中的标头,因此它必须是'Content-Type': 'application/octet-stream'
。 Is there a way to work this out?有没有办法解决这个问题?
Before sending it, converting the blob url into file worked.在发送之前,将 blob url 转换为文件工作。 I have only added these two lines then, called axios.
我只添加了这两行,称为 axios。
let blob = await fetch(blobURL).then(r => r.blob());
var file = new File([blob], "thisVideo.mp4",{type:"video/mp4", lastModified:new Date().getTime()})
This can be useful, in the situations where the file is not uploaded right away but the url saved temporarily to be called later on which was the case here.这在文件没有立即上传但 url 临时保存以供稍后调用的情况下很有用,这里就是这种情况。 If you are interested visit this question too:
如果您也有兴趣访问此问题:
How to get a file or blob from an object URL? 如何从 object URL 获取文件或 blob?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.