在input框中加入img图片

2024年2月11日 110次阅读 来源: Kunz-

其实标题是有错误的

input和其他一类的是不能加入图片的，除非你用定位

所有其实是contenteditable=”true这个属性才行

**1、定位是一种
2、contenteditable=“true”**这个属性是可以的

<p contenteditable="true">这是一个可编辑段落。</p>

我找了些资料：
https://blog.csdn.net/yifan_lion/article/details/79968367 飞机票 资料1
https://blog.csdn.net/bocongbo/article/details/84061110 飞机票 资料2

然后还有一些demo，是用js来复制网页上图片的，还有一个QQ截图之类的可以复制上去的链接：
https://blog.csdn.net/weixin_43953710/article/details/103816860 飞机票 demo位置

没来得及看，上面这个地址，根据js的demo草草写下了一个限制很大的（先贴出来，后面根据上面的说明去改）：

App页面

<template>
  <div id="app">
    <img src="./assets/2A4553BF34B5153018F4D79B310CB4E0.png" alt />
    <div id="box" contenteditable="true">
       <img src="./assets/2A4553BF34B5153018F4D79B310CB4E0.png" class="img1" alt />
    </div>
  </div>
</template>

<script>
export default { 
  name: "App",
  mounted() { 
    document.addEventListener("paste", this.getClipboardFiles);
  },
  methods: { 
    getClipboardFiles(event) { 
      console.log(event);
      let items = event.clipboardData && event.clipboardData.items;
      let file = null;
      if (items && items.length) { 
        // 检索剪切板items
        for (var i = 0; i < items.length; i++) { 
          if (items[i].type.indexOf("image") !== -1) { 
            file = items[i].getAsFile();
          }
        }
      }
      if (!file) { 
        this.alter("111111黏贴不是图片");
        return;
      }
      console.log(file);
      this.handleFilesAdd(file);
    },
    handleFilesAdd(value) { 
      var reader = new FileReader();
      reader.onload = function(value) { 
       document.getElementById('box').innerHTML =
          '<img src="' + value.target.result + '" class="input">';
      };
      reader.readAsDataURL(value);
    }
  }
};
</script>

<style>
#box { 
  display: block;
  width: 400px;
  height: 400px;
  border: 1px solid black;
}
.input{ 
  width: 10%;
  height: 10%;
}
.img1{ 
  width: 10%;
  height: 10%;
}
</style>

另外贴一下js那个方法的页面：
https://www.zhangxinxu.com/wordpress/2018/09/ajax-upload-image-from-clipboard/ 飞机票 资料5
https://www.zhangxinxu.com/study/201809/ajax-upload-image-from-clipboard-by-paste.php 飞机票 资料6

    原文作者：Kunz-
    原文地址: https://blog.csdn.net/qq_45351419/article/details/108818410
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞