이번에는 이미지 드래그 및 붙여넣기 기능을 구현하기 위한 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('image') === -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('image') === -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 = `` // 拼接成markdown语法
let content = simplemde.getValue()
simplemde.setValue(content + url + '\n') // 和编辑框之前的内容进行拼接
}
}))
}로그인 후 복사
CodeMirror-scroll 이 클래스는 simplemde 편집 상자의 클래스 이름입니다.
이제 파일을 이 편집 상자로 드래그한 다음 놓으면 아무 일도 일어나지 않습니다. 편집 상자 외부에 있으면 기본 이벤트가 계속 트리거됩니다.
다음은 simplemde 메소드를 가져와서 drop
이벤트 처리 메소드를 제공하는 것입니다.
Promise.all(requests)
.then(this.$http.spread((...resps) => {
// code
})로그인 후 복사
얼핏 보면 코드가 좀 과해 보이는데, 그 이유는 댓글 때문입니다. 아래 코드를 기반으로 자신만의 통찰과 이해를 가질 수 있습니다.
axios.all(requests)
.then(axios.spread((...resps) => {
// code
})로그인 후 복사
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
