时间戳

首页 > 解决方案 > 如何使用上传的图像 url 注入输入字段以及如何将带有表单的 url 提交到 mongodb？

reactjs - 如何使用上传的图像 url 注入输入字段以及如何将带有表单的 url 提交到 mongodb？

问题描述

免责声明：这不是另一篇文章的复制品，我正在尝试一种不同的方法来解决这个问题。问题：cloudinary 最近上传的图片覆盖了所有显示的图片目标：将上传的图片 url 与表单一起提交到后端（用户选择图片和输入字段自动填充），在后端我将能够检索将具有与表单数据相关的 mongodb id 的图像 url，因此我每次上传图像时都会使用不同图像的 url 注入 img 标签应用程序的设置方式：我有一个表单和。GUI 来显示数据。表单存储在（状态）内部，我正在使用 Cloudinary 上传图像，这些图像将上传的图像存储在称为（图像）的不同状态中。

任何想法如何做到这一点？

form 

  <form  onSubmit={props.handleSubmit} >
    <div >
  
  <div  >
  <label >Track name<input name="track" value={props.state.newTrack.track} onChange={props.handleChange}  /></label> 

  </div>
  <div >
  <label >Artist name<input name="artist" value={props.state.newTrack.artist} onChange={props.handleChange}  /></label>    

  </div>
  <div >
  <label  >album<input name="album" value={props.state.newTrack.album} onChange={props.handleChange}  /></label>

  </div>
  <div  >
  <label > Year<input name="year" value={props.state.newTrack.year} onChange={props.handleChange}  /></label>

  </div>
  <div  >
  <label >URL<input name="url" value={props.image} value={props.state.newTrack.url} onChange={props.handleSubmit}   /></label> 

  </div>



  <div  >
  <label > Upload<input name="url" type="file"    
    // value={props.state.newTrack.url}
     onChange={(e) => {
        setImageSelected(e.target.files[0]);

      
  
        
         }} /> 
         </label>
  </div>

    
    <button class="formdiv" onClick={uploadImage} > {props.state.editMode ? 'Edit ' : 'Add '}</button>
    </div>
  </form>

cloudinary upload image function
const [imageSelected, setImageSelected] = useState('');
console.log(imageSelected)
const uploadImage = () => {
    const formData = new FormData()
    formData.append('file', imageSelected)
    formData.append('upload_preset', 'musicimages')
    Axios.post(
        '   https://api.cloudinary.com/v1_1/dklcmfo0q/image/upload', formData)
    .then((res) => {
        props.setImage(res.data.url);
      })
};





function create track 
function createTrack(data){
    return fetch(BASE_URL, {
        method:'POST',
        headers: {
          'Content-type' : 'Application/json'
        },
        body: JSON.stringify(data)
      }).then(res => res.json())

设置轨道状态

const track = await createTrack(state.newTrack); // 控制台日志（图像）

  setState({
    tracks: [...state.tracks, track],
    newTrack: {
      track: "",
      artist:"",
      album: "",
      year:"",
      url:""
 
    }
  })

标签： reactjsmongodbimagefile-uploadcloudinary

解决方案

确保您上传的文件 imageSelectedfd.append(‘file’, imageSelected);是一个文件对象，而不仅仅是文件名。您可以通过记录来验证。这是一些可能有帮助的示例 vanilla JS。https://codepen.io/team/Cloudinary/pen/QgpyOK

推荐阅读