Javascript 从不使用 getElementById 的 JS 文件访问 HTML

发布于03月17日

我目前正在try 这样做，这样我的JavaScript文件将运行一个<input>按钮，当用户在传单 map 上放置标记(或开始放置它的过程)时，该按钮将被隐藏.我遵循了示例found here来帮助解决这一问题.不幸的是，当我运行它时，我添加的代码似乎没有任何作用.

What I want to have happen:个用户点击放置标记，文件资源管理器打开，供他们 Select 图像文件.

What actually happens:用户点击 map 放置一个标记，此代码似乎被忽略，因为文件资源管理器无法打开.

我是相当新手的超文本标记语言和脚本，所以我道歉，如果这是和容易解决的问题.我的代码可以在下面找到:

var map = L.map('map').setView([0, 0], 3);
var markersArray = new Array();
var marker
var counter = 0;
var markerLayer = L.layerGroup([]);
var buttons = [];

L.tileLayer('https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=TUHtC4pfxR178kXfCmqg', {
  attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
}).addTo(map)

var markerOptions = {
  draggable: false
}

function createMarkerOnClick(evt) {
  document.getElementById('imgUpload').click;
  img = document.getElementById('imgUpload').value;
  let description = prompt("Please add your description for this marker below");
  if (description == null) {
    description = "No desceiption added.";
  }
  marker = new L.Marker([evt.latlng.lat, evt.latlng.lng], markerOptions).addTo(map);
  marker.bindPopup(description);
  markersArray[counter] = marker;
  marker.addTo(markerLayer);
  markerLayer.addTo(map);
  counter++;
  toggleMarker.state('disable-markers');
}
//Delete options
function delAllMarkers() {
  for (i = 0; i < markersArray.length; i++) {
    map.removeLayer(markersArray[i]);
  }
}

function delLastMarker() {
  map.removeLayer(markersArray[counter - 1])
}


//Buttons
var toggleMarker = L.easyButton({
  states: [{
    stateName: 'enable-markers',
    icon: '<center><img src="I:\\maps\\leafmap\\location-pin.png" style="width:26px"></center>',
    title: 'Enable markers on click',
    onClick: function(control) {
      control.state('disable-markers');
      map.on('click', createMarkerOnClick);
    }
  }, {
    icon: '<center><img src="I:\\maps\\leafmap\\location-pin.png" style="width:26px"></center>',
    stateName: 'disable-markers',
    title: 'Disable markers on click',
    onClick: function(control) {
      control.state('enable-markers');
      map.off('click', createMarkerOnClick)
    }
  }]
})
buttons.push(toggleMarker);

var removeAllMarkers = L.easyButton('del-all-markers', function(btn, map) {
  delAllMarkers();
})
buttons.push(removeAllMarkers);

var removeLastMarker = L.easyButton('del-last-marker', function(btn, map) {
  delLastMarker();
})
buttons.push(removeLastMarker);

var toolbar = L.easyBar(buttons, {
  id: 'toolbar'
}).addTo(map);

.disable-markers-active {
  background-color: #FFFF99 !important;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#imgUpload {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  z-index: 400;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<link rel="stylesheet" link href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2.4.0/src/easy-button.min.css" />

<div id="map">
  <input type="file" accept="image/*" name="imgUpload" id="imgUpload" onchange="loadFile(event)" hidden/>
</div>

<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2.4.0/src/easy-button.min.js"></script>

fileInputEl.addEventListener('change', function () { // 'this' in the code below refers to the 'fileInputEl' object // Add first image, if available if (this.files.length) { const file = this.files[0]; // Read the image file content. See Stack Overflow answer: // https://stackoverflow.com/a/34840295 const reader = new FileReader(); reader.onloadend = function () { const imgSrc = reader.result; } if (file) { reader.readAsDataURL(file); } // From answer: // https://stackoverflow.com/a/54633061 // "clear value of target input, each time user clicks // on field. This ensures that the onChange event will // be triggered for the same file as well." this.value = ""; } });

let imgWidth = 0, imgHeight = 0; // Get the dimensions of the selected image // https://stackoverflow.com/questions/62574897/jquery-file-input-read-image-width-height let image = new Image(); image.src = imgSrc; image.onload = function () { imgWidth = this.naturalWidth || this.width; imgHeight = this.naturalHeight || this.height; createMarker(imgSrc, imgWidth, imgHeight); image = undefined; }

将所选图像显示为 map 标记图标

const map = L.map('map').setView([0, 0], 3);
const markersArray = new Array();
const markerLayer = L.layerGroup([]);
const buttons = [];

let fileInputEl = document.getElementById('imgUpload');
let coords; // Store the coordinates from the map click event
let marker;
let counter = 0;

// Set the 'src' attribute on an '<img>' tag
// to relative path to a file on the web server
// (e.g. "/images/location-pin.png")
// or an absolute path to a web URL like below.
// The 'locationPinUrl' constant is used in a
//const locationPinUrl = `/images/Map_pin_icon.png`;

const locationPinSvg = getPinSvg();

L.tileLayer('https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=TUHtC4pfxR178kXfCmqg', {
  attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
}).addTo(map);

const markerOptions = {
  draggable: false
};

// Store the latitude and longitude coordinates as it will be
// used in the 'createMarker()' function after the user selects
// a location pin image file.
function addMarkerModeMapClick(evt) {
  coords = [evt.latlng.lat, evt.latlng.lng];
  fileInputEl.click(); // Open file dialog
}

function createMarker(imgSrc, imgWidth, imgHeight) {
  let description = prompt("Please add your description for this marker below");
  if (description == null) {
    description = "No description added.";
  }

  if (imgSrc) {
    const width = 26;
    // Set the icon size based on the proportions
    // of the original location pin image file selected
    // by the user.
    const height = width * imgHeight / imgWidth;

    // https://leafletjs.com/examples/custom-icons
    const icon = L.icon({
      iconUrl: imgSrc,
      iconSize: [width, height], // size of the icon
      //shadowSize: [50, 64], // size of the shadow
      //iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
      //shadowAnchor: [4, 62],  // the same for the shadow
      //popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
    });

    // Add custom icon to marker options object
    markerOptions.icon = icon;
  }

  marker = new L.Marker(coords, markerOptions).addTo(map);
  marker.bindPopup(description);
  markersArray[counter] = marker;
  marker.addTo(markerLayer);
  markerLayer.addTo(map);
  counter++;
  toggleMarker.state('disable-markers');
}

//Delete options
function delAllMarkers() {
  for (i = 0; i < markersArray.length; i++) {
    map.removeLayer(markersArray[i]);
  }
}

function delLastMarker() {
  map.removeLayer(markersArray[counter - 1]);
}

// Removed the hardcoded width of the '<img>' element
// and set the width in CSS.
// Note the use of the tick (`) instead of the single quote (')
// so that the variable 'locationPinUrl' can be set inside 
// the string. See:
// https://stackoverflow.com/questions/27678052/usage-of-the-backtick-character-in-javascript

// Buttons
const toggleMarker = L.easyButton({
  states: [{
      stateName: 'enable-markers',
      //icon: `<center><img src="${locationPinUrl}"></center>`,
      icon: `<center>${locationPinSvg}></center>`,
      title: 'Enable markers on click',
      onClick: function(control) {
        control.state('disable-markers');
        map.on('click', addMarkerModeMapClick);
      }
    },
    {
      //icon: `<center><img src="${locationPinUrl}"></center>`,
      icon: `<center>${locationPinSvg}></center>`,
      stateName: 'disable-markers',
      title: 'Disable markers on click',
      onClick: function(control) {
        control.state('enable-markers');
        map.off('click', addMarkerModeMapClick);
      }
    }
  ]
});
buttons.push(toggleMarker);

const removeAllMarkers = L.easyButton('del-all-markers', function(btn, map) {
  delAllMarkers();
});
buttons.push(removeAllMarkers);

const removeLastMarker = L.easyButton('del-last-marker', function(btn, map) {
  delLastMarker();
});
buttons.push(removeLastMarker);

const toolbar = L.easyBar(buttons, {
  id: 'toolbar'
}).addTo(map);

// Add an event handler for the 'onchange' event on
// '<input type="file" />' element.

// Function taken from SO answer: https://stackoverflow.com/a/56607553
// (cancel will not trigger 'change')
fileInputEl.addEventListener('change', function() {
  // 'this' in the code below refers to the 'fileInputEl' object
  // Add first image, if available
  if (this.files.length) {
    const file = this.files[0];
    // Check if the user selected an image file
    if (!file.type.includes('image')) {
      alert("Please select an image file.");
      return;
    }
    // Read the image file content. See Stack Overflow answer:
    // https://stackoverflow.com/a/34840295
    const reader = new FileReader();
    reader.onloadend = function() {
      const imgSrc = reader.result;

      let imgWidth = 0,
        imgHeight = 0;
      // Get the dimensions of the selected image
      // https://stackoverflow.com/questions/62574897/jquery-file-input-read-image-width-height
      let image = new Image();
      image.src = imgSrc;
      image.onload = function() {
        imgWidth = this.naturalWidth || this.width;
        imgHeight = this.naturalHeight || this.height;
        createMarker(imgSrc, imgWidth, imgHeight);
        image = undefined;
      }
    }
    if (file) {
      reader.readAsDataURL(file);
    }
    // From answer:
    // https://stackoverflow.com/a/54633061
    // "clear value of target input, each time user clicks
    // on field. This ensures that the onChange event will
    // be triggered for the same file as well."
    this.value = "";
  }
});

// Map pin icon
// https://www.svgrepo.com/svg/38705/location-pin
// LICENSE: CC0 License (https://www.svgrepo.com/page/licensing#CC0)
// "The person who associated a work with this deed
// has dedicated the work to the public domain by
// waiving all of his or her rights to the work
// worldwide under copyright law, including all
// related and neighboring rights, to the extent
// allowed by law."
// "You are free: to share – to copy, distribute 
// and transmit the work"
function getPinSvg(className) {
  if (!className) {
    className = "svg-pin-icon";
  }
  return `<svg class="${className}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24px" width="20px" version="1.1" id="Capa_1" viewBox="20 0 280 280" xml:space="preserve">
            <g>
                <path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645   c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645   C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892   c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"/>
                <path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614   c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901   c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104   C179.265,127.948,165.464,141.901,148.5,141.901z"/>
            </g>
        </svg>`;
}

.disable-markers-active {
  background-color: #FFFF99 !important;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#imgUpload {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  z-index: 400;
}


/* Added the following styles so that the
    location pin image fits within the button.
    These styles override 'easy-button.css'
    loaded by the Leaflet plugin.
*/

.easy-button-button .button-state img {
  width: 100% !important;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<link rel="stylesheet" link href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2.4.0/src/easy-button.min.css" />

<div id="map"></div>

<input type="file" accept="image/*" name="imgUpload" id="imgUpload" hidden />

<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2.4.0/src/easy-button.min.js"></script>

在弹出窗口中显示所选图像

每个注释线程都添加了以下代码片段:不是设置用户 Select 的图像来取代默认的 map 标记图标，而是 Select 的图像应该显示在弹出窗口中，与描述文本内联.

const map = L.map('map').setView([0, 0], 3);
const markersArray = new Array();
const markerLayer = L.layerGroup([]);
const buttons = [];

let fileInputEl = document.getElementById('imgUpload');
let coords; // Store the coordinates from the map click event
let marker;
let counter = 0;

// Set the 'src' attribute on an '<img>' tag
// to relative path to a file on the web server
// (e.g. "/images/location-pin.png")
// or an absolute path to a web URL like below.
// The 'locationPinUrl' constant is used in a
//const locationPinUrl = `/images/Map_pin_icon.png`;

const locationPinSvg = getPinSvg();

// https://docs.maptiler.com/cloud/api/authentication-key
// https://documentation.maptiler.com/hc/en-us/articles/360020806037-How-to-protect-your-map-key
L.tileLayer('https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=TUHtC4pfxR178kXfCmqg', {
  attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
}).addTo(map);

const markerOptions = {
  draggable: false
};

// Store the latitude and longitude coordinates as it will be
// used in the 'createMarker()' function after the user selects
// a location pin image file.
function addMarkerModeMapClick(evt) {
  coords = [evt.latlng.lat, evt.latlng.lng];
  fileInputEl.click(); // Open file dialog
}

function createMarker(imgSrc) {
  let description = prompt("Please add your description for this marker below");
  // The value of the variable 'description' is 'null'
  // when the user click the 'Cancel' button in the
  // Prompt dialog box. The value of 'description' is
  // an empty string ("") when the user does not enter
  // text in the input field of the Prompt dialog box
  // but clicks the 'OK' button.
  if (description === null || description === "") {
    description = "No description added.";
  }

  //const imgElem = document.createElement('img');
  //imgElem.src = imgSrc;
  //imgElem.className = "popup-image";
  //const imgHtml = imgElem.outerHTML;

  // https://leafletjs.com/reference.html#popup
  const popupContent = `<div class="popup-image-container">
            <img class="popup-image" src="${imgSrc}" title="" />
        </div>
        <span class="popup-desc">${description}</span>`;

  marker = new L.Marker(coords, markerOptions).addTo(map);
  marker.bindPopup(popupContent);
  markersArray[counter] = marker;
  marker.addTo(markerLayer);
  markerLayer.addTo(map);
  counter++;
  toggleMarker.state('disable-markers');
}

// Delete options
function delAllMarkers() {
  for (i = 0; i < markersArray.length; i++) {
    map.removeLayer(markersArray[i]);
  }
}

function delLastMarker() {
  map.removeLayer(markersArray[counter - 1]);
}

// Removed the hardcoded width of the '<img>' element
// and set the width in CSS.
// Note the use of the tick (`) instead of the single quote (')
// so that the variable 'locationPinUrl' can be set inside 
// the string. See:
// https://stackoverflow.com/questions/27678052/usage-of-the-backtick-character-in-javascript

// Buttons
const toggleMarker = L.easyButton({
  states: [{
      stateName: 'enable-markers',
      //icon: `<center><img src="${locationPinUrl}"></center>`,
      icon: `<center>${locationPinSvg}></center>`,
      title: 'Enable markers on click',
      onClick: function(control) {
        control.state('disable-markers');
        map.on('click', addMarkerModeMapClick);
      }
    },
    {
      //icon: `<center><img src="${locationPinUrl}"></center>`,
      icon: `<center>${locationPinSvg}></center>`,
      stateName: 'disable-markers',
      title: 'Disable markers on click',
      onClick: function(control) {
        control.state('enable-markers');
        map.off('click', addMarkerModeMapClick);
      }
    }
  ]
});
buttons.push(toggleMarker);

const removeAllMarkers = L.easyButton('del-all-markers', function(btn, map) {
  delAllMarkers();
});
buttons.push(removeAllMarkers);

const removeLastMarker = L.easyButton('del-last-marker', function(btn, map) {
  delLastMarker();
});
buttons.push(removeLastMarker);

const toolbar = L.easyBar(buttons, {
  id: 'toolbar'
}).addTo(map);

// Add an event handler for the 'onchange' event on
// '<input type="file" />' element.

// Function taken from SO answer: https://stackoverflow.com/a/56607553
// (cancel will not trigger 'change')
fileInputEl.addEventListener('change', function() {
  if (this.files.length === 0) {
    return;
  }

  // 'this' in the code below refers to the 'fileInputEl' object
  // Add first image, if available
  const file = this.files[0];

  // From answer:
  // https://stackoverflow.com/a/54633061
  // "clear value of target input, each time user clicks
  // on field. This ensures that the onChange event will
  // be triggered for the same file as well."
  this.value = "";

  // Check if the user selected an image file
  if (!file.type.includes('image')) {
    alert("Please select an image file.");
    return;
  }
  if (!file) {
    return;
  }
  // Read the image file content. See Stack Overflow answer:
  // https://stackoverflow.com/a/34840295
  const reader = new FileReader();
  reader.onloadend = function() {
    // The value of 'reader.result' is the image itself
    createMarker(reader.result);
  }
  // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
  // "The readAsDataURL method is used to read the contents
  // of the specified Blob or File. When the read operation
  // is finished, the readyState becomes DONE, and the 
  // loadend is triggered."
  reader.readAsDataURL(file);
});

// Map pin icon
// https://www.svgrepo.com/svg/38705/location-pin
// LICENSE: CC0 License (https://www.svgrepo.com/page/licensing#CC0)
// "The person who associated a work with this deed
// has dedicated the work to the public domain by
// waiving all of his or her rights to the work
// worldwide under copyright law, including all
// related and neighboring rights, to the extent
// allowed by law."
// "You are free: to share – to copy, distribute 
// and transmit the work"
function getPinSvg(className) {
  if (!className) {
    className = "svg-pin-icon";
  }
  return `<svg class="${className}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24px" width="20px" version="1.1" id="Capa_1" viewBox="20 30 280 280" xml:space="preserve">
            <g>
                <path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645   c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645   C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892   c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"/>
                <path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614   c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901   c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104   C179.265,127.948,165.464,141.901,148.5,141.901z"/>
            </g>
        </svg>`;
}

.disable-markers-active {
  background-color: #FFFF99 !important;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#imgUpload {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  z-index: 400;
}


/* Added the following styles so that the
    location pin image fits within the button.
    These styles override 'easy-button.css'
    loaded by the Leaflet plugin.
*/

.easy-button-button .button-state img {
  width: 100% !important;
}

.popup-image-container {
  width: auto;
  height: auto;
}


/* Auto-resize an image while maintaining aspect ratio 
    https://stackoverflow.com/questions/3029422/how-to-auto-resize-an-image-while-maintaining-aspect-ratio
    Answer: https://stackoverflow.com/a/15355474
*/

.popup-image {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

.popup-desc {}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<link rel="stylesheet" link href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2.4.0/src/easy-button.min.css" />

<div id="map"></div>
<input type="file" accept="image/*" name="imgUpload" id="imgUpload" hidden />

<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2.4.0/src/easy-button.min.js"></script>

Javascript 从不使用 getElementById 的 JS 文件访问 HTML

推荐答案

将所选图像显示为 map 标记图标

在弹出窗口中显示所选图像

Javascript相关问答推荐

可以将SuperTest导入为ES 6模块吗？

有没有方法在Angular中的bowser选项卡之间移动HTML？

在JS中转换mysql UTC时间字段？

我不明白这个react 组件有什么问题

react 路由加载程序行为

如何在RTK上设置轮询，每24小时

将本机导航路由react 到导航栏中未列出的屏幕？

我的服务工作器没有连接到我的Chrome扩展中的内容脚本.我该怎么解决这个问题？

在Three JS中看不到补间不透明度更改效果

变量的值在Reaction组件中的Try-Catch语句之外丢失

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法？

Next.js服务器端组件请求，如何发送我的cookie token？

基于props 类型的不同props ，根据来自接口的值扩展类型

SPAN不会在点击时关闭模式，尽管它们可以发送日志(log)等

与svg相反；S getPointAtLength(D)-我想要getLengthAtPoint(x，y)

从逗号和破折号分隔的给定字符串中查找所有有效的星期几

使用jQuery find()获取元素的属性

通过跳过某些元素的对象进行映射

Jexl to LowerCase()和Replace()

FindByIdAndUpdate在嵌套对象中创建_id