Question

是否有办法允许用户从HTML上传输入中从他们的设备/计算机上传图像，该输入获取上传图像的图像URL并将其放入数组中。无论哪种方法都有效，但我的最终目标是以图像格式或URL将图像上传到Mongo数据库。我正在尝试使用具有最少量代码并使用最少量框架的解决方案。我知道允许用户上传文件的Meteor软件包，但我只想知道是否有一个更简单的解决方案，不需要框架或非常长的代码片段。最好在反应中也会很好。

Answer 1

你可以试试这个：

'click #explorer': function() {
    $("#file-upload").click();
  },
  'change #file-upload': function() {
    var photoid = $('#photoid').val();
    encodeImageFileAsURL(photoid);

    function encodeImageFileAsURL(photoid) {
      var filesSelected = document.getElementById("file-upload").files;
      if (filesSelected.length > 0) {
        var fileToLoad = filesSelected[0];
        var fileReader = new FileReader();
        fileReader.onload = function(fileLoadedEvent) {
          var photo = {
            srcData: fileLoadedEvent.target.result,
            userid: Meteor.userId(),
            photo_id: photoid
          }

          Meteor.call('addPhoto', photo)
        }
        fileReader.readAsDataURL(fileToLoad);
      }
    }
    $('#photoid').val('');
  },

html

<div class=" row ">
          <div class=" col-xs-12 ">
              <div>
              {{#if photo}}
                <img id="explorer" style="width: 130px;height: 130px;border-radius: 50%;margin: 0 auto;" class="img-responsive" src='{{photo}}' alt=""  />
              {{else}}
                    <img id="explorer" class="img-responsive img-circle" src="/persona2.png"  width="120px" alt="" />
              {{/if}}
              </div>
              <div class="col-xs-12" id="">
                  <div class="popuptext"  id="myPopup">
                  <img class="img-responsive" id="explorer"  src="/pencil.png" alt="" style="width: 43px;margin-left: 86px;margin-top: -43px;"/>
                  <image id="Browser" src=""/>
                  <input type="hidden" id="photoid"></div>
              </div>
          </div>
            <input id="file-upload" style="display: none;" type="file" accept="image/*" />
        </div>

Meteor方法addPhoto

    updatePhoto: function( photo)  {

      Meteor.users.update({'_id' : photo.userid},{$set:{'profile.photo_1': photo.srcData}},{"multi" : false, "upsert" : false});

  }

获取上传图片的图片网址

1 个答案: