在 html 和 javascript 中插入和使用用户上传的图像答案

【问题标题】：Inserting and using the user uploaded image in html and javascript在 html 和 javascript 中插入和使用用户上传的图像
【发布时间】：2020-02-13 08:22:51
【问题描述】：

这是我的代码，我需要选择用户上传的文件显示在屏幕上，然后在 API 中使用它

<div class="first">
            <p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)"</p>
            <p><img id="output" width="200" /></p>
</div>

var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
    };

【问题讨论】：

请指导我该怎么做
这能回答你的问题吗？ How to preview selected image in input type="file" in popup using jQuery?
stackoverflow.com/a/4459419/9375533

标签： html

【解决方案1】：

您好，实际上您的代码没有错，您只是在

之前缺少 ">"

<p><input type="file"  accept="image/*" name="image" id="file" onchange="loadFile(event)"</p>

改成

<p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)"></p>

你的最终代码会像这样祝你好运。

<div class="first">
  <p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)"></p>
  <p><img id="output" width="200" /></p>
</div>


<script type="text/javascript">
  var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

【讨论】：

不，实际上这只是一个错误，而我正在复制代码以在此处发布......我想知道如何获取我在屏幕上显示的图像并使用它执行图像分析使用 Google 的 Vision Api。

【解决方案2】：

按照链接中的步骤使用 Node.js 在 GCloud Bucket 上上传文件 https://cloud.google.com/nodejs/

PS。您可以为任何语言执行此操作，只需在搜索栏中输入 gcloud-，您将找到以您的语言执行此操作的步骤 https://www.youtube.com/watch?v=ji1DWCTI05A Sandip Dinesh 的这个视频解决了我的问题，希望它也能解决你的问题 :)

【讨论】：