最近在写个人博客用到了富文本编辑器,这里用的是wangEditor5版本,但是浏览了官网并没有发现上传本地图片的详细配置,很是头疼,最终在官方的demo源码中找到了本地上传的详细配置,豁然开朗!
const editorConfig = { MENU_CONF: {} }
editorConfig.MENU_CONF['uploadImage'] = {
server: 'http://106.12.198.214:3000/api/upload-img', // 上传图片地址
// server: 'http://106.12.198.214:3000/api/upload-img-10s', // 用于测试 timeout
// server: 'http://106.12.198.214:3000/api/upload-img-failed', // 用于测试 failed
// server: 'http://106.12.198.214:3000/api/xxx', // 用于测试 404
timeout: 5 * 1000, // 5s
fieldName: 'custom-fileName',
meta: { token: 'xxx', a: 100 },
metaWithUrl: true, // 参数拼接到 url 上
headers: { Accept: 'text/x-json' },
maxFileSize: 10 * 1024 * 1024, // 10M
base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
onBeforeUpload(files) {
console.log('onBeforeUpload', files)
return files // 返回哪些文件可以上传
// return false 会阻止上传
},
onProgress(progress) {
console.log('onProgress', progress)
},
onSuccess(file, res) {
console.log('onSuccess', file, res)
},
onFailed(file, res) {
alert(res.message)
console.log('onFailed', file, res)
},
onError(file, err, res) {
alert(err.message)
console.error('onError', file, err, res)
},
// // 用户自定义插入图片
// customInsert(res, insertFn) {
// console.log('customInsert', res)
// const imgInfo = res.data[0] || {}
// const { url, alt, href } = imgInfo
// if (!url) throw new Error(`Image url is empty`)
// // 自己插入图片
// console.log('自己插入图片', url)
// insertFn(url, alt, href)
// },
// // 用户自定义上传图片
// customUpload(file, insertFn) {
// console.log('customUpload', file)
// return new Promise((resolve) => {
// // 插入一张图片,模拟异步
// setTimeout(() => {
// const src = `https://www.baidu.com/img/flexible/logo/pc/result@2.png?r=${Math.random()}`
// insertFn(src, '百度 logo', src)
// resolve('ok')
// }, 500)
// })
// },
// // 自定义选择图片(如图床)
// customBrowseAndUpload(insertFn) {
// alert('自定义选择图片,如弹出图床')
// // 插入一张图片,模拟异步
// setTimeout(() => {
// const src = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
// insertFn(src, '百度 logo', src) // 插入图片
// }, 500)
// },
}
更多推荐