复制黏贴直接上传图片

小墨宝

已于 2023-11-23 10:53:57 修改

阅读量548

点赞数 1

分类专栏： js 文章标签： javascript 前端 html

于 2022-06-17 15:03:11 首次发布

本文链接：https://blog.csdn.net/qq_38935512/article/details/125333736

版权

js 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

需求复制黏贴直接上传图片

在这里插入图片描述

注意如果要和element 上传文件一起用的话在下面获取到复制文件后调用一下element的上传方法
this.$refs.zlUpload.handleStart(file); // 将粘贴过来的图片加入预上传队列

this.$refs.zlUpload.submit(); // 提交图片上传队列

上传图片的接口就不写了，下面的html demo中 file 和图片的base64都能拿到直接用直接上传就行了，需要重命名文件名，不然上传的文件名都是一样的

`上传的时候 renameFile 代替file就行啦

// 名称取当前时间戳
const type = file.type.split(‘/’);
const renameFile = new File([file], new Date().getTime() + ‘.’ + type[1], {
type: file.type
});`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片黏贴上传</title>
	<style>
		#content {
			margin:0 auto;
			width:600px;
			height:600px;
			border:1px solid black;
		}
	</style>
</head>
<body>
	<!-- 内容区域 -->
    <div id="content" contenteditable="true">
	
	</div>
<script>
	var content = document.getElementById("content")
    // 添加监听事件paste 黏贴
    content.addEventListener('paste', function (e){
      // 黏贴版没有数据,则直接结束
      if (!(e.clipboardData && e.clipboardData.items)) {
        return;
      }
      // 黏贴版数据项,是个数组
      var data = e.clipboardData.items;
      if (data && data.length) {
        var item = data[0];
        // 判断是文本还是图片文件
        if (item.kind == 'string') {
          // // 获取文本内容
          // var text = event.clipboardData.getData('Text');
          // // 设置到content中
          // content.innerHTML = text;
        } else if (item.kind == 'file') {
          // 获取文件
          var file = item.getAsFile();
          // file 就是我们输入框选择文件所获取的文件内容
          
          // 图片插入div中
          var reader = new FileReader();
          reader.readAsDataURL(file);
			// 名称取当前时间戳
            const type = file.type.split('/');
            const renameFile = new File([file], new Date().getTime() + '.' + type[1], {
              type: file.type
            });
            params.file = renameFile;
           upload(that.params);

          reader.onload = function (event) {
            var img = document.createElement("img");
            // event.target.result 输出 图片base64
            img.src = event.target.result;
            content.appendChild(img);
            
          }
        }
      }
      e.preventDefault();
    });
</script>
</body>
</html>

params:参数

let params= {
          action: process.env.UPLOADFILE_URL + '/uploadFile', // 上传文件路径
          filename: 'file',
          data: undefined,
          headers: {},
        }

接口上传 upload（content）

 const formData = new FormData();
  content.file && formData.append('file', content.file);
  if (content.otherData) {
    content.otherData.forEach((item) => {
      formData.append(item.key, encodeURI(item.value));
    });
  }
  axios
    .post(content.action, formData, {
      params: content.params,
      headers: { 'Content-Type': 'multipart/form-data', ...content.headers }
    })
    .then((res) => {
      if (res.data.code === 0 && res.data.result) {
        invokSuccess(res.data, content.file);
      } else {
        throw new Error(res.data.msg);
      }
    })
    .catch((error) => {
      const msg = (error || {}).message || error;
      content.onError(msg);
    });