wangEditor上传图片到本地

//普通富文本配置（ajax上传）
var E = window.wangEditor
var editor = new E('#achi_intro')
editor.customConfig.showLinkImg = false
editor.customConfig.uploadImgServer = './api/admin/uploadFile'//配置上传到服务器地址
editor.customConfig.customUploadImg = function (files, insert) {//对上传的图片进行处理，图片上传的方式
var data = new FormData()
data.append("img", files[0])
$.ajax({
url: "./api/admin/uploadFile",
type: "post",
data: data,
processData: false,
contentType: false,
success: function (data) {
console.log(data)
var imgUrl=data.newName
//这里是对图片格式进行处理，我这里因为是要保存到本地服务器上，将图片前缀修改
editor.cmd.do('insertHTML', '<img style="width: 200px;height: 200px;" src="http://localhost/ScTradeInSta/public/resource/image/'+ imgUrl+'" alt="">')
},
error: function () {
alert("图片上传错误")
}
})
}

//vue axios上传图片 富文本配置//html
<div ref="editorBox"></div>

//js
this.editor = new E(this.$refs.editorBox)
this.editor.customConfig.showLinkImg = false
this.editor.customConfig.uploadImgServer = 'api/v1/upload/uploadLocal'//配置上传到服务器地址
this.editor.customConfig.customUploadImg =
(files, insert) =>{//对上传的图片进行处理，图片上传的方式
var data = new FormData()
data.append("img", files[0])
this.$axios.post("api/v1/upload/uploadLocal", data,).then((res) => {
var imgUrl = this.$imgBaseUrl + res.data.data
this.editor.cmd.do('insertHTML', `<img style="width: 200px;height: 200px;" src=${imgUrl} alt="">`)
})
}
this.editor.create()

最后

以上就是简单菠萝为你收集整理的wangEditor上传图片到本地的全部内容，希望文章能够帮你解决wangEditor上传图片到本地所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。