|
@@ -42,8 +42,8 @@
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="mb-3">
|
|
|
- <label for="imageUpload" class="form-label">选择图片</label>
|
|
|
- <input type="file" class="form-control" id="imageUpload" accept="image/*">
|
|
|
+ <label for="imageUrl" class="form-label">图片URL</label>
|
|
|
+ <input type="text" class="form-control" id="imageUrl" placeholder="输入图片URL">
|
|
|
</div>
|
|
|
<div class="mb-3">
|
|
|
<label for="nameCn" class="form-label">中文名称</label>
|
|
@@ -61,8 +61,8 @@
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="mb-3">
|
|
|
- <label for="searchImageUpload" class="form-label">选择搜索图片</label>
|
|
|
- <input type="file" class="form-control" id="searchImageUpload" accept="image/*">
|
|
|
+ <label for="searchImageUrl" class="form-label">搜索图片URL</label>
|
|
|
+ <input type="text" class="form-control" id="searchImageUrl" placeholder="输入搜索图片URL">
|
|
|
</div>
|
|
|
<div id="searchPreview"></div>
|
|
|
<button class="btn btn-primary" onclick="searchImage()">搜索</button>
|
|
@@ -83,36 +83,25 @@
|
|
|
<script>
|
|
|
const baseUrl = 'http://47.96.90.34:18081/website';
|
|
|
|
|
|
- // 预览上传图片
|
|
|
- document.getElementById('imageUpload').addEventListener('change', function(e) {
|
|
|
- previewImage(e.target.files[0], 'uploadPreview');
|
|
|
+ // 预览URL图片
|
|
|
+ document.getElementById('imageUrl').addEventListener('change', function(e) {
|
|
|
+ previewImageUrl(this.value, 'uploadPreview');
|
|
|
});
|
|
|
|
|
|
- document.getElementById('searchImageUpload').addEventListener('change', function(e) {
|
|
|
- previewImage(e.target.files[0], 'searchPreview');
|
|
|
+ document.getElementById('searchImageUrl').addEventListener('change', function(e) {
|
|
|
+ previewImageUrl(this.value, 'searchPreview');
|
|
|
});
|
|
|
|
|
|
- function previewImage(file, previewId) {
|
|
|
- if (!file) return;
|
|
|
-
|
|
|
- const reader = new FileReader();
|
|
|
- reader.onload = function(e) {
|
|
|
- const previewDiv = document.getElementById(previewId);
|
|
|
- previewDiv.innerHTML = `<img src="${e.target.result}" class="preview-image">`;
|
|
|
- }
|
|
|
- reader.readAsDataURL(file);
|
|
|
- }
|
|
|
-
|
|
|
- async function uploadToServer(file) {
|
|
|
- // 这里应该是上传到您的服务器或者华为云OBS的逻辑
|
|
|
- // 为了演示,这里假设直接返回一个测试URL
|
|
|
- return "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/tmp/a3.png";
|
|
|
+ function previewImageUrl(url, previewId) {
|
|
|
+ if (!url) return;
|
|
|
+ const previewDiv = document.getElementById(previewId);
|
|
|
+ previewDiv.innerHTML = `<img src="${url}" class="preview-image" onerror="this.style.display='none'">`;
|
|
|
}
|
|
|
|
|
|
async function uploadImage() {
|
|
|
- const file = document.getElementById('imageUpload').files[0];
|
|
|
- if (!file) {
|
|
|
- alert('请选择图片');
|
|
|
+ const imageUrl = document.getElementById('imageUrl').value;
|
|
|
+ if (!imageUrl) {
|
|
|
+ alert('请输入图片URL');
|
|
|
return;
|
|
|
}
|
|
|
|
|
@@ -123,10 +112,6 @@
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
- // 先上传图片到服务器获取URL
|
|
|
- const imageUrl = await uploadToServer(file);
|
|
|
-
|
|
|
- // 创建图片记录
|
|
|
const response = await fetch(`${baseUrl}/image/create`, {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
@@ -151,9 +136,9 @@
|
|
|
}
|
|
|
|
|
|
async function searchImage() {
|
|
|
- const file = document.getElementById('searchImageUpload').files[0];
|
|
|
- if (!file) {
|
|
|
- alert('请选择搜索图片');
|
|
|
+ const imageUrl = document.getElementById('searchImageUrl').value;
|
|
|
+ if (!imageUrl) {
|
|
|
+ alert('请输入搜索图片URL');
|
|
|
return;
|
|
|
}
|
|
|
|
|
@@ -164,9 +149,6 @@
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
- // 先上传搜索图片获取URL
|
|
|
- const imageUrl = await uploadToServer(file);
|
|
|
-
|
|
|
const response = await fetch(`${baseUrl}/image/fassi/list`, {
|
|
|
method: 'GET',
|
|
|
headers: {
|