fix: 参考图@插入图bug修复
This commit is contained in:
old burden
parent
f3c3e78901
commit
9f7e43a21a
|
|
@ -2290,8 +2290,10 @@ defineExpose({
|
|||
position: absolute;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
max-height: 180px;
|
||||
/* 高度与富文本框一致；内容超出时内部滚动 */
|
||||
max-height: none;
|
||||
overflow-y: auto;
|
||||
background: rgba(22, 24, 30, 0.98);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
|
|
|
|||
|
|
@ -201,6 +201,9 @@
|
|||
<div class="asset-file-dropzone-text">点击选择或拖拽上传</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="createForm.previewUrl && createForm.assetType === 'Image'" class="asset-file-preview">
|
||||
<img :src="createForm.previewUrl" alt="" />
|
||||
</div>
|
||||
<div class="asset-file-hint">{{ createForm.fileName || '未选择文件' }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="素材名称">
|
||||
|
|
@ -255,6 +258,8 @@ export default {
|
|||
groupId: '',
|
||||
file: null,
|
||||
fileName: '',
|
||||
previewUrl: '',
|
||||
localPreviewUrl: '',
|
||||
name: '',
|
||||
assetType: 'Image'
|
||||
},
|
||||
|
|
@ -284,7 +289,40 @@ export default {
|
|||
mounted() {
|
||||
this.loadGroups()
|
||||
},
|
||||
watch: {
|
||||
createAssetVisible(val) {
|
||||
if (!val) this.clearCreateUploadPreview()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearCreateUploadPreview() {
|
||||
if (this.createForm?.localPreviewUrl) {
|
||||
try {
|
||||
URL.revokeObjectURL(this.createForm.localPreviewUrl)
|
||||
} catch (_) {}
|
||||
}
|
||||
this.createForm.previewUrl = ''
|
||||
this.createForm.localPreviewUrl = ''
|
||||
},
|
||||
setCreateFormFile(file) {
|
||||
this.createForm.file = file || null
|
||||
this.createForm.fileName = file?.name || ''
|
||||
|
||||
const mime = String(file?.type || '').toLowerCase()
|
||||
// 根据文件类型自动设置素材类型，避免与文件不匹配
|
||||
if (mime.startsWith('image/')) this.createForm.assetType = 'Image'
|
||||
else if (mime.startsWith('video/')) this.createForm.assetType = 'Video'
|
||||
else if (mime.startsWith('audio/')) this.createForm.assetType = 'Audio'
|
||||
|
||||
// 图片预览
|
||||
this.clearCreateUploadPreview()
|
||||
if (mime.startsWith('image/')) {
|
||||
try {
|
||||
this.createForm.localPreviewUrl = URL.createObjectURL(file)
|
||||
this.createForm.previewUrl = this.createForm.localPreviewUrl
|
||||
} catch (_) {}
|
||||
}
|
||||
},
|
||||
formatAssetTypeLabel(it) {
|
||||
const t = String(it?.AssetType || it?.assetType || '').trim()
|
||||
if (!t) return '-'
|
||||
|
|
@ -352,6 +390,7 @@ export default {
|
|||
this.createForm.fileName = ''
|
||||
this.createForm.name = ''
|
||||
this.createForm.assetType = 'Image'
|
||||
this.clearCreateUploadPreview()
|
||||
this.createAssetVisible = true
|
||||
},
|
||||
async loadGroups() {
|
||||
|
|
@ -389,30 +428,28 @@ export default {
|
|||
this.createForm.groupId = gid
|
||||
this.searchAssets(1)
|
||||
},
|
||||
triggerCreateFilePicker() {
|
||||
const el = this.$refs.createAssetFileInput
|
||||
if (el && typeof el.click === 'function') el.click()
|
||||
},
|
||||
onCreateUploadDragEnter() {
|
||||
this.createUploadDragOver = true
|
||||
},
|
||||
onCreateUploadDragOver() {
|
||||
this.createUploadDragOver = true
|
||||
},
|
||||
onCreateUploadDragLeave() {
|
||||
this.createUploadDragOver = false
|
||||
},
|
||||
onCreateUploadDrop(e) {
|
||||
this.createUploadDragOver = false
|
||||
const file = e?.dataTransfer?.files?.[0]
|
||||
if (!file) return
|
||||
this.createForm.file = file
|
||||
this.createForm.fileName = file?.name || ''
|
||||
},
|
||||
triggerCreateFilePicker() {
|
||||
const el = this.$refs.createAssetFileInput
|
||||
if (el && typeof el.click === 'function') el.click()
|
||||
},
|
||||
onCreateUploadDragEnter() {
|
||||
this.createUploadDragOver = true
|
||||
},
|
||||
onCreateUploadDragOver() {
|
||||
this.createUploadDragOver = true
|
||||
},
|
||||
onCreateUploadDragLeave() {
|
||||
this.createUploadDragOver = false
|
||||
},
|
||||
onCreateUploadDrop(e) {
|
||||
this.createUploadDragOver = false
|
||||
const file = e?.dataTransfer?.files?.[0]
|
||||
if (!file) return
|
||||
this.setCreateFormFile(file)
|
||||
},
|
||||
onFileChange(e) {
|
||||
const file = e?.target?.files?.[0]
|
||||
this.createForm.file = file || null
|
||||
this.createForm.fileName = file?.name || ''
|
||||
const file = e?.target?.files?.[0]
|
||||
this.setCreateFormFile(file)
|
||||
},
|
||||
async createAsset() {
|
||||
const groupId = String(this.createForm.groupId || '').trim()
|
||||
|
|
@ -429,6 +466,12 @@ export default {
|
|||
const uploadUrl = extractUploadUrlFromResponse(uploadRes)
|
||||
if (!uploadUrl) throw new Error(uploadRes?.msg || '上传后未返回文件地址')
|
||||
|
||||
// 图片上传成功后，在上传组件展示远程预览（替换本地预览）
|
||||
if (this.createForm.assetType === 'Image') {
|
||||
this.clearCreateUploadPreview()
|
||||
this.createForm.previewUrl = uploadUrl
|
||||
}
|
||||
|
||||
// 2) 再通过 /api/byteAsset/createAsset(JSON) 用 url 创建素材
|
||||
const res = await this.$axios({
|
||||
url: ASSET_CREATE_API,
|
||||
|
|
@ -441,11 +484,18 @@ export default {
|
|||
}
|
||||
})
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增素材成功')
|
||||
this.$message.success(this.createForm.assetType === 'Image' ? '上传图片成功' : '上传成功')
|
||||
this.createForm.file = null
|
||||
this.createForm.fileName = ''
|
||||
this.createForm.name = ''
|
||||
this.createAssetVisible = false
|
||||
const isImage = this.createForm.assetType === 'Image'
|
||||
if (isImage) {
|
||||
// 图片模式下延迟关闭，避免用户来不及看到上传组件缩略图
|
||||
setTimeout(() => {
|
||||
this.createAssetVisible = false
|
||||
}, 500)
|
||||
} else {
|
||||
this.createAssetVisible = false
|
||||
}
|
||||
this.searchAssets(1)
|
||||
} else {
|
||||
this.$message.error(res.msg || '新增素材失败')
|
||||
|
|
@ -857,6 +907,22 @@ export default {
|
|||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.asset-file-preview {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.asset-file-preview img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.asset-file-hint {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue