vue-simplemde는 이미지 드래그 및 붙여넣기 기능을 구현합니다(코드 첨부)

이번에는 이미지 드래그 및 붙여넣기 기능을 구현하기 위한 vue-simplemde를 가져왔습니다(코드 포함). vue-simplemde에서 이미지 드래그 및 붙여넣기 기능을 구현하기 위한 notes는 무엇입니까? 다음은 실제 사례입니다. 봐.

이 프로젝트는 vue 프레임워크를 사용하며 마크다운 편집 상자가 필요합니다. npm에서 검색한 결과 simplemde가 꽤 좋다는 것을 알았습니다. 게으르기 때문에 다시 npm에서 검색하여 vue -simplemde를 찾았습니다. >이 패키지를 선택한 다음 사용을 시작하세요. vue-simplemde这个 package ，那就开始使用它吧。

但是这个 vue-simplemde 不支持图片拖拽上传、粘贴上传，也不能说是因为这个 vue-simplemde ，因为 vue-simplemde 只是对 simplemde 的基础上封装成一个Vue插件。所以最后还是由于 simplemde 没有提供相关的功能，但是为了用户体验考虑，这个功能时必要的，除非不使用markdown编辑器。而去使用富文本编辑器，那样的话，项目很多的代码都要进行更改。所以就在网上查了文章，及在github上查了一些代码。下面将进行分析

拖拽

拖拽的API核心是 drop 这个事件，就是当我们从桌面拖动一个文件到浏览器里时，松开的时候，而触发的事件名。

我们都知道，你随便拖动一个图片到浏览器里，会直接打开这个图片，这是因为浏览器默认你拖动文件到浏览器里时，将打开这个文件，所以，我们需要阻止原生的操作。

我们现在先写一段代码，让其屏蔽掉默认事件

window.addEventListener("drop", e => {
 e = e || event
 if (e.target.className === 'CodeMirror-scroll') { // 如果进入到编辑器的话，将阻止默认事件
 e.preventDefault()
 }
}, false)

CodeMirror-scroll 这个Class就是 simplemde 编辑框的Class名称。

现在我们拖拽文件到这个编辑框，然后松掉，不会出现任何反应。如果在编辑框之外的地方，还是会继续触发默认事件。

下面就是获取 simplemde 方法，给他 drop 事件处理方法。

// 假设页面一共有三个编辑窗口，所以需要循环监听事件
[ this.$refs.simplemde1,
 this.$refs.simplemde2,
 this.$refs.simplemde3
].map(({simplemde}) => {
 simplemde.codemirror.on('drop', (editor, e) => {
 if (!(e.dataTransfer && e.dataTransfer.files)) {
  // 弹窗说明，此浏览器不支持此操作
  return
 }
 let dataList = e.dataTransfer.files
 let imageFiles = [] // 要上传的文件实例数组
 // 循环，是因为可能会同时拖动几个图片文件
 for (let i = 0; i < dataList.length; i++) {
 // 如果不是图片，则弹窗警告 仅支持拖拽图片文件
  if (dataList[i].type.indexOf(&#39;image&#39;) === -1) {
  // 下面的continue，作用是，如果用户同时拖动2个图片和一个文档，那么文档不给于上传，图片照常上传。
  continue
  }
  imageFiles.push(dataList[i]) // 先把当前的文件push进数组里，等for循环结束之后，统一上传。
 }
 // uploadImagesFile方法是上传图片的方法
 // simplemde.codemirror的作用是用于区分当前的图片上传是处于哪个编辑框
 this.uploadImagesFile(simplemde.codemirror, imageFiles)
 // 因为已经有了下面这段代码，所以上面的屏蔽默认事件代码就不用写了
 e.preventDefault()
 })
})

诈一看，代码好像有点多，那是因为注释的原因，下面是没有注释的代码。你可以根据下面的代码，有自己的见解和理解：

[ this.$refs.simplemde1,
 this.$refs.simplemde2,
 this.$refs.simplemde3
].map(({simplemde}) => {
 simplemde.codemirror.on('drop', (editor, e) => {
 if (!(e.dataTransfer && e.dataTransfer.files)) {
  return
 }
 let dataList = e.dataTransfer.files
 let imageFiles = []
 for (let i = 0; i < dataList.length; i++) {
  if (dataList[i].type.indexOf(&#39;image&#39;) === -1) {
  continue
  }
  imageFiles.push(dataList[i])
 }
 this.uploadImagesFile(simplemde.codemirror, imageFiles)
 e.preventDefault()
 })
})

粘贴

粘贴的API是 paste 方法，这个不像上面一样，粘贴不需要禁止默认事件，因为我们可以看到，你复制一个图片，到浏览器里按下 ctrl+v 的时候，是不会发生任何变化的，所以没用必要禁止默认事件。

下面是代码:

simplemde.codemirror.on('paste', (editor, e) => { // 粘贴图片的触发函数
 if (!(e.clipboardData && e.clipboardData.items)) {
 // 弹窗说明，此浏览器不支持此操作
 return
 }
 try {
 let dataList = e.clipboardData.items
 if (dataList[0].kind === 'file' && dataList[0].getAsFile().type.indexOf('image') !== -1) {
  this.uploadImagesFile(simplemde.codemirror, [dataList[0].getAsFile()])
 }
 } catch (e) {
 // 弹窗说明，只能粘贴图片
 }
})

之所以这里写上 try...catch 方法，是因为如果你粘贴的时候，如果是一个文件， items 将是空的，而在下面的if循环里，使用 dataList[0].kind 。也就是 e.clipboardData.items[0].kind 。当 item 为空时，还去访问一个不存的 kind 属性时，就会报错了。所以这里需要使用 try...catch 方法进行判断。

dataList[0].getAsFile().type.indexOf('image') !== -1

하지만 이 vue-simplemde는 이미지 드래그 앤 드롭 업로드, 붙여넣기 업로드를 지원하지 않으며, vue-simplemde 때문이라고는 할 수 없습니다. vue-simplemde는 단지 Vue 플러그인이기 때문입니다. Simplemde를 기반으로합니다. 그래서 결국 simplemde에서는 관련 기능을 제공하지 않기 때문인데, 사용자 경험을 위해서 마크다운 에디터를 사용하지 않는 이상 이 기능은 꼭 필요하다. 대신 서식 있는 텍스트 편집기를 사용하세요. 이 경우 프로젝트의 많은 코드를 변경해야 합니다. 그래서 온라인에서 기사를 확인하고 github에서 일부 코드를 확인했습니다. 다음 내용이 분석됩니다

Drag and drop

드래그 앤 드롭 API의 핵심은 드롭 이벤트인데, 이는 데스크톱에서 브라우저로 파일을 드래그하고 릴리스할 때 발생하는 이벤트 이름입니다. 그것.

사진을 브라우저로 드래그하면 사진이 바로 열리는 것을 모두 알고 있습니다. 이는 파일을 브라우저로 드래그할 때 브라우저가 기본적으로 파일을 열도록 설정되어 있기 때문입니다. 따라서 기본 작업을 방지해야 합니다.

이제 기본 이벤트를 차단하는 코드를 작성해 보겠습니다.

uploadImagesFile (simplemde, files) {
 // 把每个文件实例使用FormData进行包装一下，然后返回一个数组
 let params = files.map(file => {
 let param = new FormData()
 param.append('file', file, file.name)
 return param
 })
 let makeRequest = params => {
 return this.$http.post('/Api/upload', params)
 }
 let requests = params.map(makeRequest)
 this.$http.spread = callback => {
 return arr => {
  return callback.apply(null, arr)
 }
 }
 // 服务端返回的格式是{state: Boolean, data: String}
 // state为false时，data就是返回的错误信息
 // state为true时，data是图片上传后url地址，这个地址是针对网站的绝对路径。如下：
 // /static/upload/2cfd6a50-3d30-11e8-b351-0d25ce9162a3.png
 Promise.all(requests)
 .then(this.$http.spread((...resps) => {
  for (let i = 0; i < resps.length; i++) {
  let {state, data} = resps[i].data
  if (!state) {
   // 弹窗显示data的错误信息
   continue
  }
  let url = `![](${location.origin + data})` // 拼接成markdown语法
  let content = simplemde.getValue()
  simplemde.setValue(content + url + &#39;\n&#39;) // 和编辑框之前的内容进行拼接
  }
 }))
}

CodeMirror-scroll 이 클래스는 simplemde 편집 상자의 클래스 이름입니다.

이제 파일을 이 편집 상자로 드래그한 다음 놓으면 아무 일도 일어나지 않습니다. 편집 상자 외부에 있으면 기본 이벤트가 계속 트리거됩니다.

다음은 simplemde 메소드를 가져와서 drop 이벤트 처리

메소드를 제공하는 것입니다.

Promise.all(requests)
 .then(this.$http.spread((...resps) => {
 // code
 })

얼핏 보면 코드가 좀 과해 보이는데, 그 이유는 댓글 때문입니다. 아래 코드를 기반으로 자신만의 통찰과 이해를 가질 수 있습니다.

axios.all(requests)
 .then(axios.spread((...resps) => {
 // code
 })

🎜🎜🎜Paste🎜🎜🎜🎜붙여넣기용 API는 위와 달리 기본 이벤트를 비활성화할 필요가 없습니다. 우리가 볼 수 있듯이, 이미지를 복사하고 브라우저에서 Ctrl+V를 누르면 아무 것도 바뀌지 않으므로 기본 이벤트를 비활성화할 필요가 없습니다. 🎜🎜다음은 코드입니다.🎜rrreee🎜여기에 try...catch 메소드를 쓴 이유는 붙여넣으면 파일이면 항목이 비게 되고 아래 if 루프에서 다음을 사용하기 때문입니다. dataList [0].kind. e.clipboardData.items[0].kind입니다. 항목이 비어 있고 존재하지 않는 종류 속성에 액세스하면 오류가 보고됩니다. 따라서 여기서는 try...catch 메소드를 사용하여 판단해야 합니다. 🎜🎜dataList[0].getAsFile().type.indexOf('image') !== -1 붙여넣은 것이 다른 것이 아닌 이미지임을 확인하는 문장입니다. . 🎜🎜if에서 이미지를 업로드할 때의 차이점은 [dataList[0].getAsFile()]입니다. 형식을 통일하고 uploadImagesFile 함수의 처리를 용이하게 하기 위해 []를 추가하여 배열로 만들었기 때문입니다. dataList[0].getAsFile()은 파일 인스턴스를 가져오는 것입니다. 🎜🎜🎜🎜업로드🎜🎜🎜🎜업로드는 약간 번거롭습니다. 🎜rrreee🎜axiox를 사용하기 위한 vue 플러그인으로 캡슐화하기 때문에 this.$http 자체가 아니라 인스턴스화됩니다. axios 관리자가 제안한 해결책은 axios 패키지를 다시 도입하여 사용하는 것입니다. 하지만 나는 그것이 필요하다고 생각하지 않습니다. 내부적으로 axios.all 은 Promise.all 입니다. axios.spread의 구현 코드는 상대적으로 작으므로 직접 가져 와서 axios🎜🎜에 다시 할당하십시오. 따라서 위의 코드는 🎜rrreee🎜이 코드를 🎜rrreee🎜로 번역하십시오. 이 문제에 대해서는 공식 설명을 읽어보십시오: axios- 모든 기능은 vue 구성 요소 내부가 아닙니다. axios 코드를 살펴볼 수도 있습니다: axios.js#L45-L48🎜🎜이 문제는 당분간 다루지 않겠습니다. 🎜🎜위에서 상태가 true일 때 데이터는 웹사이트에 상대적인 파일의 절대 경로라고 언급했습니다. 예: /static/upload/2cfd6a50-3d30-11e8-b351-0d25ce9162a3.png🎜

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

jQuery 인코딩 변환 base64 AJAX를 통한 업로드

vue 구성 요소 작성 사양

위 내용은 vue-simplemde는 이미지 드래그 및 붙여넣기 기능을 구현합니다(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!