Ctrl+V粘贴图片上传

paste事件

paste 一个标准的Dom事件，粘贴事件，会在用户按下Ctrl+v 或者通过鼠标粘贴时触发

document.addEventListener('paste', (event) => {
  console.log('粘贴事件', event)
});

监听事件

/**
 * 文件上传
 * @param file 文件
 * @returns 图片地址
 */
const fileUpload = async (file) => {
  let path = ''
  let formData = new FormData();
  formData.append("file", file);
  await fetch(`上传地址`, {
    method: 'POST',
    body: formData
  })
  .then(res => {
    return res.json();
  })
  .then(data => {
    if (data.header.code == "A1000") {
      path = data.body.path
    } else {
      proxy.$toast.warn(data.header.msg);
    }
  });
  return path
}


onMounted(() => {
  /**
   * 监听粘贴事件
   */
  document.addEventListener('paste', (event) => {
    // 判断粘贴内容是图片
    if (event.clipboardData.items[0].type.indexOf('image') === -1) {
      return;
    }
    // 图片上传
    const file = event.clipboardData.items[0].getAsFile(); // 图片
    fileUpload(file).then(path => {
      state.list.push({
        url: path,
      })
    })
  });
})