我正在尝试上传文件到cloudinary。这是我的react组件的一部分
...
addItem() {
...
let file = this.fileInput.value;
keywords !== "" && this.props.onAddItem(keywords, place, image);
...
}
render() {
return (
....
<Input
type="file"
innerRef={(input) => {this.fileInput = input}}
name="image"
id="image"
placeholder=""/>
)
}字符串
下面是动作文件：
export function onAddItem(keywords, place, file, id, isChangebale = false) {
return (dispatch) => {
axios.all([
axios.post('https://api.cloudinary.com/v1_1/myservername/image/upload',
{upload_preset: "mypresetname", file: file}),
axios.post('http://localhost:3001/api/items/', { keywords, place, id, isChangebale })
])
.then(axios.spread((cloudinaryRes, localRes) => {
console.log(cloudinaryRes, localRes);
}))型
我收到错误xhr.js:178 POST https://api.cloudinary.com/v1_1/testovich/image/upload 400 (Bad Request)和响应头"X-Cld-Error: Unsupported source URL: C:\fakepath\2017-12-07_19-06-445.png"
当我使用postman测试时，我得到了正确的响应。
x1c 0d1x的数据
所以看起来我在把文件从rect组件传递到动作文件时做错了什么。如何将正确的路径/文件传递到cloudinary？
3条答案
按热度按时间af7jpaap1#
有两个错误：1.在React组分中应有
字符串
代替了
型
1.在行动文件
const formData = new FormData（）; formData.append（“file”，image）; formData.append（“upload_preset”，“mypresetname”）;
return（dispatch）=> { axios.all（[ // AJAX upload request using Axios）axios.post（' https://api.cloudinary.com/v1_1/myservername/image/upload '，formData，
而不是：
型
snz8szmq2#
将图像转换为base64，如
const base64Img = data:image/jpg;base64,${file.data};file.data表示图像拾取器响应的数据属性。然后我将base64Img传递给像return RNFetchBlob.fetch('POST', apiUrl, headerProps, [ { name: 'file', fileName: file.fileName, type: file.type, data: base64Img } ]);这样的数据，希望它能有所帮助。x6h2sr283#
我使用了formik和React，也遇到了同样的问题。我试图上传一个单一的图像后，做我的研究，我意识到可能有2个可能的原因，这个错误
1.传递给formData的值必须是单个File Object。
const upload=（file）=>{ const data = new FormData（）; data. Append（'file '，file）data.append'cloud_name'，<cloud_name>）data.append（'upload_preset'，<cloud_preset>）fetch（'https：//api.cloudinary.com/v1_1//image/upload'，{method：'post '，body：data，mode：'cors '}）.then（res=> res.json（））.then（data=>{ console.log（data）}）
这里的文件应该从e.target.files[0]中获取，提供正确的索引
字符串
1.如果错误仍然存在，请解构从窗体接收的文件值。
型