英文:
how to download file from flask in react native
问题
我正在制作一个小型应用程序，用于从YouTube下载视频。我在前端使用React Native，后端使用Python Flask。
以下是在服务器上下载视频并将其作为附件返回给客户端的代码：
from flask import Flask, send_file
import vid_request
app = Flask(__name)
@app.route("/<url>")
def download(url):
path = vid_request.download(url, "/tempDownloads")
return send_file(path, as_attachment=True)
if __name__ == "__main__":
app.run(host="0.0.0.0")
// vid_request 文件
import pytube
def download(url, path):
url = "https://www.youtube.com/watch?v=" + url
youtubeObject = pytube.YouTube(url).streams.filter(only_audio=True).first()
out_file = youtubeObject.download(output_path=path)
return out_file
当我在浏览器中访问URL并输入YouTube链接时，这段代码可以正常工作。但当我在React Native中使用以下代码时：
await fetch(`http://192.168.0.12:5000/${input}`);
它不起作用并显示错误。是否有更好的方法在服务器端发送文件，或者从客户端端下载文件的更好方法？
英文:
I am making a small app that downloads videos from youtube. I am using react native for the frontend, and python flask for the backend.
Here is the code on the server that downloads the video to the server and returns it to the client as an attachment
from flask import Flask, send_file
import vid_request
app = Flask(__name__)
@app.route("/<url>")
def download(url):
path = vid_request.download(url, r"\tempDownloads")
return send_file(path, as_attachment=True)
if __name__ == "__main__":
app.run(host="0.0.0.0")
// vid_request file
import pytube
def download(url, path):
url = "https://www.youtube.com/watch?v="+url
youtubeObject = pytube.YouTube(url).streams.filter(only_audio=True).first()
out_file = youtubeObject.download(output_path=path)
return out_file
This works when I go to the url and enter the youtube link, but when I do it from react native using this
await fetch(`http://192.168.0.12:5000/${input}`);
It doesn't work and gives an error, is there a better way for sending the file on the server side, or better way of downloading from the client side?
答案1
得分: 1
npx expo install expo-file-system- 如果是原生 React Native，还需要按照以下步骤进行设置：https://github.com/expo/expo/tree/sdk-47/packages/expo-file-system
- 修改以下部分：
import { downloadAsync, documentDirectory } from 'expo-file-system';
import { Button, View } from 'react-native';
export default function App() {
const download = async () => {
console.log("downloading");
const { uri: localUri } = await downloadAsync('http://192.168.0.12:5000/video.mp4', documentDirectory + 'video.mp4');
console.log("download complete. File " + localUri);
}
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Button title="download" onPress={download}></Button>
</View>
);
}
英文:
npx expo install expo-file-system- If its bare React Native, you need to additionally follow this steps:
https://github.com/expo/expo/tree/sdk-47/packages/expo-file-system - Amend the following
import { downloadAsync, documentDirectory} from 'expo-file-system';
import { Button, View } from 'react-native';
export default function App() {
const download = async () => {
console.log("downloading");
const { uri: localUri } = await downloadAsync('http://192.168.0.12:5000/video.mp4', documentDirectory + 'video.mp4');
console.log("download complete. File "+localUri);
}
return (
<View style={{flex:1, alignItems: "center", justifyContent: "center"}}>
<Button title="download" onPress={download}></Button>
</View>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论