如何解决如何使用 MERN 和 FormData 将视频上传到 cloudinary？
let formData = new FormData()
formData.append("file",myfile)
console.log("uploading",formData,apiss)
const headers={
"Content-Type": "multipart/form-data",}
apiss.post(`/video`,{
headers:headers,onUploadProgress: data => {
//Set the progress value to show the progress bar
console.log(Math.round((100 * data.loaded) / data.total))
},}).then(vid=>{
console.log(vid,"myvidss",vid.data.msg)
this.setState({videourl:vid.data.msg,cool:"uploaded"})
})
.catch(err=>{
console.log("err",err)
})
// setFileInputState('');
// setPreviewSource('');
console.log('Video uploaded successfully');
app.post('/upload/video',async(req,res)=>{
try{
console.log("yes video",req,req.body,req.file,req.files)
// console.log(req.body.data)
// var ks;
// for (var key of formData.entries()) {
// ks=key[1]
// console.log(key[1] + ',' + key[1])
// }
const uploadreesp=await cloudinary.uploader.upload_large(req.body,{
width: 800,height: 500,crop: "scale",resource_type: "auto",public_id: "videos",chunk_size: 6000000,timeout:120000,folder:'videos',upload_preset: 'photos',})
console.log(uploadreesp)
res.json({ msg: uploadreesp.secure_url });
console.log("uploaded video")
}catch(err){
console.log(err,"yes")
}
})
import React,{ Component } from "react";
// import { unmountComponentAtNode } from "react-dom";
import api from "../api";
import Axios from "axios";
class VideosInsert extends Component{
constructor(props) {
super(props);
this.state = {
names: "",imageurl: "",videourl: "www.google.com",image :"",video:"",cool:"",cools:''
};
}
handleChangeInputName = async (event) => {
const names = event.target.value;
this.setState({ names });
};
handleFileInputChange = (e) => {
const file = e.target.files[0];
// previewFile(file);
this.setState({image:file,cools:'uploading'},()=>{
if (this.state.image==="") return;
const reader = new FileReader();
console.log(this.state.image)
reader.readAsDataURL(this.state.image);
const uploadImage = async (base64EncodedImage) => {
try {
const apiss = Axios.create({
baseURL: 'http://localhost:3005/upload',})
var body=JSON.stringify({ data: base64EncodedImage });
console.log("uploading",body,apiss)
const headers={
'Content-Type': 'application/json'
}
apiss.post(`/image`,{
headers:headers
}).then(vid=>{
console.log(vid,"myvid",vid.data.msg)
this.setState({imageurl:vid.data.msg,cools:"uploaded"})
})
.catch(err=>{
console.log("err",err)
})
// setFileInputState('');
// setPreviewSource('');
console.log('Image uploaded successfully');
} catch (err) {
console.error(err);
console.log('Something went wrong!');
}
};
reader.onloadend = () => {
uploadImage(reader.result);
};
reader.onerror = () => {
console.error('AHHHHHHHH!!');
console.log('something went wrong!');
};
});
};
handleFileVideoChange=async(e)=>{
const myfile=e.target.files[0];
console.log(e,e.target.value,myfile,myfile.path,e.target.files,myfile.name,myfile.result,"cool",myfile.path)
this.setState({video:myfile,cool:'uploading'},()=>{
const uploadVideo = async (base64enco) => {
try {
const apiss = Axios.create({
baseURL: 'http://localhost:3005/upload',})
console.log(this.state.video,this.state.cool)
let formData = new FormData()
formData.append("file",onUploadProgress: data => {
console.log(Math.round((100 * data.loaded) / data.total))
},err)
})
console.log('Video uploaded successfully');
} catch (err) {
console.error(err);
console.log('Something went wrong!');
}
};
uploadVideo(myfile);
})
};
handleSubmitFile = async(e) => {
e.preventDefault();
const { names,imageurl,videourl }=this.state;
const payload={names,videourl}
await api.insertVideo(payload).then((res) => {
window.alert(`Movie inserted successfully`);
console.log(this.state.cool)
this.setState({
names: "",rating: "",time: "",});
});
}
render(){
console.log(this.state.cool)
return(
<div >
<label>Name</label><br/>
<input type="textbox" onChange={this.handleChangeInputName} value={this.state.names}/><br/>
<label>Upload Image</label><br/>
<input type="file" onChange={this.handleFileInputChange}/>
<span style={{color:'blue'}}>{this.state.cools}</span><br/>
<label>Upload Video</label><br/>
<input type="file" onChange={this.handleFileVideoChange}/>
<span style={{color:'blue'}}>{this.state.cool}</span><br/><br/>
<input type="submit" value="submit" onClick={this.handleSubmitFile}/>
</div>
);
}
}
export default VideosInsert;
我可以使用 base64encoding 将视频和图像上传到 cloudinary，但是 base64 编码使视频非常大，所以我只想发送实际的视频数据，所以我选择了我在许多视频中看到的 FormData()。但是他们使用了当今浏览器不支持的 req.file.path。我收到错误，指出路径属性是为未定义编写的。如何使用 FormData() 将数据从 reactjs 前端发送到 mongodb 后端。如果不是，最好的其他选择是什么？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。