Commit cfa850bf authored by liujiangnan's avatar liujiangnan

debug

parent 48cfaa5d
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
.data-card { .data-card {
position: relative; position: relative;
height: 320px; height: 450px;
width: 300px; width: 300px;
vertical-align: top; vertical-align: top;
} }
...@@ -102,4 +102,70 @@ audio { ...@@ -102,4 +102,70 @@ audio {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
}
/* 图片上传区域样式 */
.image-uploader {
width: 120px;
height: 120px;
line-height: 120px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.image-uploader:hover {
border-color: #409EFF;
}
.upload-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
}
.image-preview {
width: 100%;
height: 100%;
position: relative;
}
.uploaded-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-actions {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.image-preview:hover .image-actions {
opacity: 1;
}
.image-actions i {
color: #fff;
font-size: 20px;
margin: 0 10px;
cursor: pointer;
}
.image-actions i:hover {
transform: scale(1.2);
} }
\ No newline at end of file
...@@ -22,11 +22,30 @@ ...@@ -22,11 +22,30 @@
<el-card v-for="item, index in data" :key="index" class="data-card"> <el-card v-for="item, index in data" :key="index" class="data-card">
<div> <div>
<el-form label-width="40px"> <el-form label-width="40px">
<el-form-item label="图片">
<div class="image-uploader">
<el-upload
:action="uploadUrl"
:data="uploadData"
:show-file-list="false"
:on-success="(res, file) => handleImageSuccess(res, file, index)"
:before-upload="beforeImageUpload">
<div v-if="data[index].image_url" class="image-preview">
<img :src="data[index].image_url" class="uploaded-image">
<div class="image-actions">
<i class="el-icon-zoom-in" @click.stop="previewImage(data[index].image_url)"></i>
<i class="el-icon-delete" @click.stop="removeImage(index)"></i>
</div>
</div>
<i v-else class="el-icon-plus upload-icon"></i>
</el-upload>
</div>
</el-form-item>
<el-form-item label="英文"> <el-form-item label="英文">
<el-input v-model="data[index].text_en" placeholder="请输入英文" @change="save"></el-input> <el-input type="textarea" v-model="data[index].text_en" placeholder="请输入英文" @change="save"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="中文"> <el-form-item label="中文">
<el-input v-model="data[index].text_cn" placeholder="请输入中文" @change="save"></el-input> <el-input type="textarea" v-model="data[index].text_cn" placeholder="请输入中文" @change="save"></el-input>
</el-form-item> </el-form-item>
<!-- 新增音频上传和预览部分 --> <!-- 新增音频上传和预览部分 -->
<el-form-item label="音频"> <el-form-item label="音频">
......
...@@ -32,6 +32,7 @@ new Vue({ ...@@ -32,6 +32,7 @@ new Vue({
}, },
methods: { methods: {
handleAudioSuccess(res, file, index) { handleAudioSuccess(res, file, index) {
console.log(res, file, index);
// 假设上传接口返回的音频URL在 res.url 中 // 假设上传接口返回的音频URL在 res.url 中
this.data[index].audio_url = res.url; this.data[index].audio_url = res.url;
this.data[index].audio_name = file.name; this.data[index].audio_name = file.name;
...@@ -111,6 +112,7 @@ new Vue({ ...@@ -111,6 +112,7 @@ new Vue({
text_en: '', text_en: '',
text_cn: '', text_cn: '',
audio_url: '', audio_url: '',
image_url: '',
audio_name: '', audio_name: '',
audio_size: '', audio_size: '',
audio_duration: '', audio_duration: '',
...@@ -118,6 +120,62 @@ new Vue({ ...@@ -118,6 +120,62 @@ new Vue({
}); });
this.save(); this.save();
}, },
// 图片上传成功的回调
handleImageSuccess(res, file, index) {
// 假设上传接口返回的图片URL在 res.url 中
console.log(res, file, index);
this.data[index].image_url = res.url;
this.save();
},
// 图片上传前的验证
beforeImageUpload(file) {
const isImage = file.type.startsWith('image/');
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isImage) {
this.$message.error('只能上传图片文件!');
return false;
}
if (!isLt2M) {
this.$message.error('图片大小不能超过 2MB!');
return false;
}
return true;
},
// 预览图片
previewImage(url) {
// 使用 Element UI 的 Image 组件预览
const h = this.$createElement;
this.$msgbox({
title: '图片预览',
message: h('img', {
attrs: {
src: url,
style: 'max-width: 100%; max-height: 500px;'
}
}),
showCancelButton: false,
confirmButtonText: '关闭'
});
},
// 删除图片
removeImage(index) {
this.$confirm('确定要删除这张图片吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.data[index].image_url = '';
this.save();
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => { });
}
}, },
computed: { computed: {
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment