如何进行图片粘贴上传?
如何进行图片粘贴上传?
相关帖子
-
-
felicityyin •作者
前端这样写:
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 = `![${'img'}](${resp.Data.ImgUrl})` } else { return this.$message({ type: 'error', message: resp.Msg }) } this.vditor.insertValue(imgMdStr) },
后端接接收到图片后可以保存到本地或上传到云存储,然后返回图片的 URL
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于