# 1.0.4 配置文档

[返回1.0.4目录](./api.md) | [返回主文档](../../README.md)

## ⚙️ 上传图片
### quick-start

### 修改模板中的图片预览
```vue
<!--src/components/ImageUpload/index.vue-->
<el-dialog
    v-model="dialogVisible"
    title="预览"
    width="800px"
    append-to-body
>
  <img
      :src="getDisplayUrl(dialogImageUrl)"
      style="display: block; max-width: 100%; margin: 0 auto"
  />
</el-dialog>
```

### 添加一个辅助函数来统一处理URL显示
```javascript
<!--src/components/ImageUpload/index.vue-->
const getDisplayUrl = (url) => {
    if (!url) return '';
    // 如果是完整的URL，直接使用
    if (url.startsWith('http://') || url.startsWith('https://')) {
        return url;
    }
    // 如果是相对路径，拼接基础URL用于显示
    if (url.startsWith('/')) {
        return baseUrl + url;
    }
    // 其他情况直接返回
    return url;
};

// or
getDisplayUrl(url){
    if (!url) return '';
    // 如果是完整的URL，直接使用
    if (url.startsWith('http://') || url.startsWith('https://')) {
        return url;
    }
    // 如果是相对路径，拼接基础URL用于显示
    if (url.startsWith('/')) {
        return this.baseUrl + url;
    }
    // 其他情况直接返回
    return url;
}
```

### 修改 listToString 函数，保存正确的URL
```javascript
<!--src/components/ImageUpload/index.vue-->
// 对象转成指定字符串分隔
function listToString(list, separator) {
    let strs = "";
    separator = separator || ",";
    for (let i in list) {
        const fileItem = list[i];
        if (fileItem.url && fileItem.url.indexOf("blob:") !== 0) {
            // 获取要保存的URL
            let saveUrl = fileItem.url;

            // 如果是完整的OSS URL，可能需要转换为相对路径
            if (saveUrl && (saveUrl.startsWith('http://') || saveUrl.startsWith('https://'))) {
                // 可以根据需要决定保存完整URL还是相对路径
                // 这里保存完整URL，你也可以根据后端要求调整
                strs += saveUrl + separator;
            } else {
                // 相对路径直接使用
                strs += saveUrl.replace(baseUrl, "") + separator;
            }
        }
    }
    return strs != "" ? strs.substr(0, strs.length - 1) : "";
}
```

### 修改预览函数，支持OSS URL
```javascript
<!--src/components/ImageUpload/index.vue-->
// 预览
function handlePictureCardPreview(file) {
    // 修改这里：如果是相对路径，需要拼接完整的URL
    if (file.url && !file.url.startsWith('http')) {
        dialogImageUrl.value = baseUrl + file.url;
    } else {
        dialogImageUrl.value = file.url;
    }
    dialogVisible.value = true;
}
```

### 修改 watch 监听函数，处理回显数据
```javascript
<!--src/components/ImageUpload/index.vue-->
watch(() => props.modelValue, val => {
    if (val) {
        // 首先将值转为数组
        const list = Array.isArray(val) ? val : props.modelValue.split(",");
        // 然后将数组转为对象数组
        fileList.value = list.map(item => {
            if (typeof item === "string") {
                // 判断是否为完整的OSS URL
                if (item.startsWith('http://') || item.startsWith('https://')) {
                    // 如果是完整的URL，直接使用
                    return { name: item, url: item };
                } else if (item.indexOf(baseUrl) === -1) {
                    // 如果是相对路径，拼接基础URL
                    return { name: baseUrl + item, url: item };
                } else {
                    return { name: item, url: item };
                }
            }
            // 如果已经是对象，确保url字段正确
            if (item && typeof item === 'object') {
                // 如果有ossUrl，优先使用ossUrl作为显示URL
                if (item.ossUrl) {
                    return {
                        name: item.name || item.fileName,
                        url: item.ossUrl,
                        originalName: item.originalFilename
                    };
                }
                return item;
            }
            return item;
        });
    } else {
        fileList.value = [];
        return [];
    }
},{ deep: true, immediate: true });
```

### 处理上传成功回调（关键修改）
```javascript
<!--src/components/ImageUpload/index.vue-->
// 上传成功回调 - 修改这个函数
function handleUploadSuccess(res, file) {
    if (res.code === 200) {
        // 修改这里：优先使用 ossUrl，如果没有则使用 url
        // 保持结构一致：{ name: xxx, url: xxx }
        uploadList.value.push({
            name: res.fileName,
            url: res.ossUrl || res.url  // 修改这里
        });
        uploadedSuccessfully();
    } else {
        number.value--;
        proxy.$modal.closeLoading();
        proxy.$modal.msgError(res.msg);
        proxy.$refs.imageUpload.handleRemove(file);
        uploadedSuccessfully();
    }
}
```

## 相关文档
[返回主文档](../../README.md)

*迁移改造若依版本: 1.0.4-SNAPSHOT | 最后更新: 2025-12-05*