reactjs - 用户选择一张后,使用 fetch API 上传图片
问题描述
用户从图库中选择首选照片后,我需要将图像作为个人资料照片上传到服务器。我将在这里解释这个场景:第一个用户选择首选照片,我需要调用一个 API 来发送用户 ID,它会返回给我另一个照片 ID,之后我需要调用媒体上传 API 并发送用户 ID,选中照片,文件夹名称,即用户和文件扩展名。这是我如何实现的:
const userData = useSelector(state => state.user.userData)
//alow for access to the gallery
const allowAccess = async () => {
if (Platform.OS !== 'web') {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
} else {
pickImage()
.then((imageUri) => {
getUploadId(userData.id)
.then(
uploadMedia(userData.id, imageUri)
)
})
}
}
}
const getUploadId = (userId) => {
return axios
.post('**api_url**', {
"id": userId
})
.then(response => {
// response.data is the products
const uploadId = response.data
console.log('this is upload id', uploadId)
return uploadId
})
.catch(error => {
// error.message is the error message
console.log(error.message)
})
}
const uploadMedia = (userId, imageFile) => {
return axios
.post('**api_url**'
, {
"fileName": userId,
"FormFile": imageFile,
"FolderName": "Users",
"FileExtension": '.jpg'
})
.then(response => {
const res = response.data
})
.catch(error => {
// error.message is the error message
console.log(error.message)
})
}
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
const imageUri = result.uri
return imageUri
};
媒体上传给我的状态码是500,我该如何处理?任何帮助,将不胜感激。
解决方案
推荐阅读
- r - 如何将“ppd”类的 R 对象转换为干净的 tibble?
- java - 如何使用 Android Room 从数据库中获取一行?
- python - 覆盖运营商的方法?(创建粗略的编译器)
- neo4j - 如何从子节点开始在有向图中获取 Neo4j 节点的列表?
- python - 烧瓶处理程序启动两次
- python - 使用 AJAX 更新 div 内的多个元素
- haskell - 用于不纯但无效计算的纯管道
- android - 在 Android 设备中读取 SELinux
- javascript - 将计数项添加到字符串替换器 node.js
- asp.net - ASP.NET(VB)列表框不会将所有选定的项目移动到其他列表框