如何进行图片粘贴上传?
如何进行图片粘贴上传?
前端这样写:
initVditor() {
const that = this
const options = {
cache: {
enable: true,
},
mode: 'ir',
height: this.height, // 编辑器总高度
theme: 'dark', // 编辑器主题
preview: {
delay: 100,
show: !this.isMobile,
theme: {
current: 'dark' // 内容主题
},
hljs: {
enable: true, // 代码高亮
style: 'vim',
lineNumber: true
},
outline: { // 显示大纲
enable: true
},
// markdown: {
// toc: true // 展示目录
// }
},
toolbarConfig: {
pin: false, // 是否固定工具栏
},
after: () => {
if (this.content) {
this.vditor.setValue(this.content)
}
},
upload: {
url: process.env.WEB_API + '/file/upload',
max: 5 * 1024 * 1024,
linkToImgUrl: process.env.WEB_API + '/file/upload',
handler(files) {
let formData = new FormData()
for (let i = 0; i < files.length; i++) {
formData.append('file', files[i])
}
let request = new XMLHttpRequest()
// 图片上传路径
request.open('POST', process.env.WEB_API + '/file/upload')
request.onload = that.onloadCallback
request.send(formData)
}
}
}
this.vditor = new Vditor('vditor', options)
return this.vditor
},
onloadCallback(oEvent) {
const currentTarget = oEvent.currentTarget
console.log("返回的结果", currentTarget)
if (currentTarget.status !== 200) {
return this.$message({
type: 'error',
message: currentTarget.status + ' ' + currentTarget.statusText
})
}
let resp = JSON.parse(currentTarget.response)
let imgMdStr = ''
if (resp.Code === Code.SUCCESS) {
imgMdStr = ``
} else {
return this.$message({
type: 'error',
message: resp.Msg
})
}
this.vditor.insertValue(imgMdStr)
},
后端接接收到图片后可以保存到本地或上传到云存储,然后返回图片的 URL
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于