Question

我需要将图像上传到Strapi。我有一个名为book的表，并且具有三个字段：b_type，b_num，b_image。但是，状态码为500，但不按b_image则为200。

let file
    const ImageUpload = () =>{
        let box = document.querySelector('.popup_win')
        let uploadField = document.querySelector('.upload')
        uploadField.addEventListener('change', (e) =>{
            file = e.currentTarget.files[0]
            checkType(file)
        })
     }
const finish = ()=>{
        const form = new FormData()
        form.append('b_image', file)
        form.append('b_num', 3)
        form.append('b_type', 'student')

        axios.post('http://localhost:1337/books', form, {
            headers: {'Content-Type': 'multipart/form-data'}
        })
        .then((response) => {
            console.log(response.data)

        })
        .catch((e) => {
            console.log(e)
        })
        document.querySelector('.popup').style.display='none'
    }

Answer 1

以下是有关文件上传的文档，它可以帮助您https://strapi.io/documentation/3.x.x/guides/upload.html#file-upload。

因此，首先必须创建没有图像的Book条目。

然后，您必须上传文件并设置要链接的条目。

因此将有2个请求。

这里是一个示例https://strapi.io/documentation/3.x.x/guides/upload.html#examples 我们将图像链接到现有文章。

Answer 2

花点时间进行锻炼，但这是我的方法：

const submitUpload = e => {
  e.preventDefault();

  const formData = new FormData(e.target);

  axios.post("http://localhost:1337/images", {})
    .then(res => {
      console.log(res);

      formData.append('refId', res.data.id);

      axios.post(`http://localhost:1337/upload`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    })
    .catch(err => {
      console.log(err);
    });
}

return (
  <form id='form' onSubmit={e => submitUpload(e)}>
    <input type="file" name="files" />
    <input type="text" name="ref" value="image" />
    <input type="text" name="field" value="image" />
    <input type="submit" value="Submit" />
  </form>
)

https://strapi.io/documentation/3.x.x/guides/upload.html#examples给出了ref和refId输入值的含义。

错误500使用Axios将图像上传到trapi

2 个答案: