功能需求,在富文本中插入图片或视频到阿里云oss中,并在富文本中回显
<Editor
:mode="mode"
:defaultConfig="state.editorConfig"
:style="{ height }"
ref=""
v-model="state.editorVal"
@onCreated="handleCreated"
@onChange="handleChange"
/>
//富文本配置
const state = reactive({
editorVal: props.getHtml,
editorConfig: {
placeholder: props.placeholder,
MENU_CONF: {},
editorVal: props.getHtml,
},
})
安装依赖 npm i ali-oss
utils文件夹下=>创建alioss.ts 代码如下
import OSS from 'ali-oss'
export function client<T>(accessKeyId: T, accessKeySecret: T) {
console.log('接收到的', accessKeyId, accessKeySecret)
var clients = new OSS({
region: 'oss-cn-beijing', //阿里云oss地区
accessKeyId, //id
secure: true,
accessKeySecret, //密钥
bucket: 'vue3-sass', //远程仓库名称
}) //后端提供数据
console.log('打印返回的client', clients)
return clients
}
utils文件夹下=>创建guid.ts 代码如下
// 生成GUID
export function newGuid() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
}
//获取文件后缀名
const getExtension = (file: File) => {
if (file) {
// 通过正则表达式提取文件后缀名
const regex = /(?:\.([^.]+))?$/
const result = regex.exec(file.name)
return result?.[1] || null
}
return null // 处理输入为 null 的情况
}
//上传图片 普通上传
state.editorConfig.MENU_CONF['uploadImage'] = {
allowedFileTypes: ['image/*'], //限定上传类型
// 单个文件的最大体积限制,默认为 2M
maxFileSize: 2 * 1024 * 1024,
// 超时时间,默认为 10 秒
timeout: 10 * 1000, // 10 秒
// 最多可上传几个文件,默认为 100
maxNumberOfFiles: 100,
headers: { Accept: 'text/x-json' },
// 自定义图片上传
async customUpload(files: File, insertFn: any) {
percentage.value = 0
showPercentage.value = true
let AccessKeyId = '你的阿里云oss id'
let AccessKeySecret = '你的阿里云oss 密钥'
ElMessage({
message: '开始上传,请等待!',
type: 'warning',
})
const fileGuid = newGuid()
const fileSuffix = getExtension(files)
const newFileName = fileGuid + '.' + fileSuffix
//初始化配置
let res = await client(AccessKeyId, AccessKeySecret).put(
newFileName,
files,
{
progress,
timeout: 120000, //设置超时时间
headers: {
'Content-Type': 'image/jpeg',
},
}
)
console.log('插入图片', res)
//插入图片 地址
insertFn(res.res.requestUrls[0])
ElMessage({
message: '上传成功!',
type: 'success',
})
setTimeout(() => {
showPercentage.value = false
}, 500)
},
}
//上传进度
const progress = (progress: any, checkpoint: any) => {
// Object的上传进度。
console.log('上传进度', progress)
percentage.value = Number((progress * 100).toFixed(0))
// 分片上传的断点信息。
console.log('分片上传的断点信息', checkpoint)
if (checkpoint && checkpoint.uploadId) {
checkpoints[checkpoint.uploadId] = checkpoint
console.log('打印checkpoints', checkpoints)
}
}
//上传视频 分片上传
state.editorConfig.MENU_CONF['uploadVideo'] = {
allowedFileTypes: ['video/*'],
maxNumberOfFiles: 1,
// 超时时间,默认为 10 秒
timeout: 200 * 1000, // 5 秒
// 最多可上传几个文件,默认为 100
maxNumberOfFiles: 100,
async customUpload(file: File, insertFn: any) {
ElMessage({
message: '开始上传,请等待!',
type: 'warning',
})
percentage.value = 0
showPercentage.value = true
console.log('打印insertFn', insertFn)
let AccessKeyId = '你的阿里云oss id'
let AccessKeySecret = '你的阿里云oss 密钥'
const fileGuid = newGuid()
const fileSuffix = getExtension(file)
const newFileName = fileGuid + '.' + fileSuffix
let res = await client(AccessKeyId, AccessKeySecret).multipartUpload(
newFileName,
file,
{
parallel: parallel,
partSize,
timeout: 120000, //设置超时时间
progress,
headers: {
'Content-Type': 'video/mp4',
},
}
)
const parts = res.res.requestUrls[0].split('?')
if (parts.length > 1) {
const cleanedString = parts[0]
insertFn(cleanedString)
} else {
insertFn(res.res.requestUrls[0])
}
ElMessage({
message: '上传成功!',
type: 'success',
})
setTimeout(() => {
showPercentage.value = false
}, 500)
},
}