时间戳

首页 > 解决方案 > MERN+ Cloudinary：不支持的源 URL

reactjs - MERN+ Cloudinary：不支持的源 URL

问题描述

我正在尝试将文件上传到cloudinary。这是我的反应组件的一部分

...
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"

当我使用邮递员进行测试时，我得到了正确的响应。

在此处输入图像描述

所以看起来我在将文件从 rect 组件传递到操作文件时做错了。如何将正确的路径/文件传递给 cloudinary？

标签： reactjsexpressaxioscloudinary

解决方案

有两个错误：1.在react组件中应该有

let file = this.fileInput.files[0];//I upload only one file

代替

let file = this.fileInput.value;

  1. 在行动文件中

    导出函数 onAddItem(keywords, place, image, id, isChangebale = false) { const formData = new FormData(); formData.append("文件", 图片); formData.append("upload_preset", "mypresetname");

    return (dispatch) => { axios.all([ // AJAX 上传请求使用 Axios ) axios.post(' https://api.cloudinary.com/v1_1/myservername/image/upload ', formData,

代替：

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}),

推荐阅读