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

Posted 2023-03-25

【中文标题】如何使用上传的图像 url 注入输入字段以及如何将带有表单的 url 提交到 mongodb？

【英文标题】：how to inject the input field with the uploaded image url and how to submit the url with the form to mongodb?

【发布时间】：2021-11-19 23:12:15

【问题描述】：

免责声明：这不是另一个帖子的复制品，我正在尝试一种不同的方法来解决这个问题。 问题：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); // console.log(image)

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

【参考方案1】：

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

【讨论】：

我不认为这对我有用，我的问题是我有一个从表单获取数据的状态，当用户提交所有数据时，所有数据都存储在 mongodb 中并显示在屏幕上，在该表单中，我想使用 cloudinary 上传图像，将响应 url 与状态一起作为 url 字符串发送，这样它就会显示出来。