如何用JavaScript将API返回的图片URL存入变量供后续表单处理使用

方法一：使用隐藏输入框（推荐，符合表单提交常规流程） #

这种方式最稳妥，利用表单的隐藏输入字段存储图片URL，提交时直接读取即可。

1. 在HTML表单中添加隐藏输入框
   在你的产品表单里插入一个隐藏的input元素，用来存储上传后的图片URL：

   <input type="hidden" id="product_image_url" name="image_url">
   

2. 修改图片上传代码，将URL存入隐藏输入框
   调整上传逻辑，把Cloudinary返回的URL赋值给这个隐藏输入框：

   const apiKey = "你的上传预设密钥";
   const file = document.getElementById("file");
   const img = document.getElementById("img");
   const urlDisplay = document.getElementById("image_url");
   const hiddenImageInput = document.getElementById("product_image_url"); // 获取隐藏输入框
   
   file.addEventListener("change", ev => {
       const formdata = new FormData();
       formdata.append("file", ev.target.files[0]);
       formdata.append("upload_preset", apiKey);
       
       fetch("https://api.cloudinary.com/v1_1/dj6n2zg0o/image/upload", {
           method: "post",
           body: formdata
       })
       .then(data => data.json())
       .then(data => {
           img.src = data.url;
           urlDisplay.innerText = data.url;
           hiddenImageInput.value = data.url; // 把URL存入隐藏输入框
       })
       .catch(err => console.error("图片上传失败：", err)); // 新增错误捕获
   });
   

3. 修改表单处理函数，加入图片URL提交
   在提交时读取隐藏输入框的URL，和其他字段一起发送：

   const newFormHandler = async (event) => {
       event.preventDefault();
    
       const name = document.querySelector('#name').value.trim();
       const initial_price = document.querySelector('#initial_price').value.trim();
       const description = document.querySelector('#description').value.trim();
       const image_url = document.querySelector('#product_image_url').value.trim(); // 获取图片URL
   
       // 增加图片URL的校验
       if (name && initial_price && description && image_url) {
           const response = await fetch(`/api/products`, {
               method: 'POST',
               body: JSON.stringify({ name, initial_price, description, image_url }), // 加入image_url字段
               headers: {
                   'Content-Type': 'application/json',
               },
           });
   
           if (response.ok) {
               document.location.replace('/');
           } else {
               alert('创建产品失败');
           }
       } else {
           alert('请填写所有必填字段并完成图片上传');
       }
   };
   
   document.querySelector('.new-product-form').addEventListener('submit', newFormHandler);
   

方法二：使用全局变量（适合简单场景） #

如果不想修改HTML结构，可以用全局变量暂存图片URL，但要注意页面刷新会丢失数据。

1. 声明全局变量存储URL
   在代码最外层定义一个全局变量：

   let uploadedImageUrl = "";
   

2. 修改上传代码赋值给全局变量

   const apiKey = "你的上传预设密钥";
   const file = document.getElementById("file");
   const img = document.getElementById("img");
   const urlDisplay = document.getElementById("image_url");
   
   file.addEventListener("change", ev => {
       const formdata = new FormData();
       formdata.append("file", ev.target.files[0]);
       formdata.append("upload_preset", apiKey);
       
       fetch("https://api.cloudinary.com/v1_1/dj6n2zg0o/image/upload", {
           method: "post",
           body: formdata
       })
       .then(data => data.json())
       .then(data => {
           img.src = data.url;
           urlDisplay.innerText = data.url;
           uploadedImageUrl = data.url; // 赋值给全局变量
       })
       .catch(err => console.error("图片上传失败：", err));
   });
   

3. 修改表单处理函数使用全局变量

   const newFormHandler = async (event) => {
       event.preventDefault();
    
       const name = document.querySelector('#name').value.trim();
       const initial_price = document.querySelector('#initial_price').value.trim();
       const description = document.querySelector('#description').value.trim();
       const image_url = uploadedImageUrl.trim();
   
       if (name && initial_price && description && image_url) {
           const response = await fetch(`/api/products`, {
               method: 'POST',
               body: JSON.stringify({ name, initial_price, description, image_url }),
               headers: {
                   'Content-Type': 'application/json',
               },
           });
   
           if (response.ok) {
               document.location.replace('/');
           } else {
               alert('创建产品失败');
           }
       } else {
           alert('请填写所有必填字段并完成图片上传');
       }
   };
   
   document.querySelector('.new-product-form').addEventListener('submit', newFormHandler);
   

额外建议 #

• 上传前可以增加文件校验：比如限制文件类型为image/jpeg、image/png，检查文件大小是否符合要求
• 表单提交前可以再次验证图片URL是否存在，避免用户未上传图片就提交
• 建议保留错误捕获逻辑，方便排查上传失败的问题

内容的提问来源于stack exchange，提问作者mollysal