perf: editor image upload

This commit is contained in:
xingyu4j
2022-08-06 23:17:02 +08:00
parent 48427994d4
commit ca3674b006
2 changed files with 43 additions and 12 deletions

View File

@ -8,6 +8,8 @@ import { ElMessage } from 'element-plus'
import { useLocaleStore } from '@/store/modules/locale'
import { getAccessToken, getTenantId } from '@/utils/auth'
type InsertFnType = (url: string, alt: string, href: string) => void
const localeStore = useLocaleStore()
const currentLocale = computed(() => localeStore.getCurrentLocale)
@ -85,29 +87,58 @@ const editorConfig = computed((): IEditorConfig => {
['uploadImage']: {
server: import.meta.env.VITE_UPLOAD_URL,
// 单个文件的最大体积限制,默认为 2M
maxFileSize: 2 * 1024 * 1024,
maxFileSize: 5 * 1024 * 1024,
// 最多可上传几个文件,默认为 100
maxNumberOfFiles: 10,
// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
allowedFileTypes: ['image/*'],
// 自定义上传参数,例如传递验证的 token 等。参数会被添加到 formData 中,一起上传到服务端。
meta: {},
meta: { updateSupport: 0 },
// 将 meta 拼接到 url 参数中,默认 false
metaWithUrl: false,
metaWithUrl: true,
// 自定义增加 http header
headers: {
Accept: 'image/*',
Accept: '*',
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
},
// 跨域是否传递 cookie ,默认为 false
withCredentials: false,
withCredentials: true,
// 超时时间,默认为 10 秒
timeout: 5 * 1000 // 5 秒
timeout: 5 * 1000, // 5 秒
// form-data fieldName后端接口参数名称默认值wangeditor-uploaded-image
fieldName: 'file',
// 上传之前触发
onBeforeUpload(file: File) {
console.log(file)
return file
},
// 上传进度的回调函数
onProgress(progress: number) {
// progress 是 0-100 的数字
console.log('progress', progress)
},
onSuccess(file: File, res: any) {
console.log('onSuccess', file, res)
},
onFailed(file: File, res: any) {
alert(res.message)
console.log('onFailed', file, res)
},
onError(file: File, err: any, res: any) {
alert(err.message)
console.error('onError', file, err, res)
},
// 自定义插入图片
customInsert(res: any, insertFn: InsertFnType) {
insertFn(res.data, 'image', res.data)
}
}
},
uploadImgShowBase64: true