iview-admin富文本框上传本地图片
路径：iview-admin/src/components/editor/editor.vue
import { fileUpload, ResultImg } from '@/api/uploadFile'
data () {
return {
formData: new FormData() //创建一个formData对象
}
},
mounted () {
let _this = this
this.editor.customConfig.customUploadImg = async function (files, insert) { //上传本地图片
let path = ''
if (_this.formData.has('fileName')) { //删除之前上传过的图片列表
_this.formData.delete('fileName')
}
_this.formData.append('fileName', files[0]) //上传文件名字段为fileName
fileUpload(_this.formData).then(res => { //上传图片
path = res.data.data.list
}).then(res => {
ResultImg({ path: path }).then(res => { //获取图片
const cpath = res.data
insert(cpath) // 上传代码返回结果之后，将图片插入到编辑器中
})
})
}
}
富文本框无法选中字体等添加如下样式：
.editor-wrapper *{
z-index: 100 !important;
}
.w-e-menu {
z-index: 2 !important;
}
.w-e-text-container {
z-index: 1 !important;
}
.w-e-text-container {
height: 600px !important;
}
uploadFile.js
import axios from '@/libs/api.request'
export function fileUpload (query) { // 上传图片
return axios.request({
url: '',
method: 'post',
data: query
})
}
export function ResultImg (query) { // 返回图片路径
return axios.request({
url: '',
method: 'get',
params: query
})
}
作者：qq_42260463
