# 1.0.4 配置文档

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

## ⚙️ 文件组件
### quick-start

### 文件列表
```vue
<!--src/components/FileUpload/index.vue-->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
  <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
    <el-link :href="getFileUrl(file.url)" :underline="false" target="_blank">
      <span class="el-icon-document">
        <!-- 显示原始文件名或新文件名 -->
        {{ file.originalName || getFileName(file.name) }}
      </span>
    </el-link>
    <div class="ele-upload-list__item-content-action">
      <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
    </div>
  </li>
</transition-group>
```

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

### 修改 watch 监听函数，处理回显数据
```javascript
<!--src/components/FileUpload/index.vue-->
// 上传成功回调
watch(() => props.modelValue, val => {
    if (val) {
        let temp = 1;
        // 首先将值转为数组
        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，直接使用
                    item = { name: item, url: item };
                } else {
                    // 如果是相对路径，也直接使用（getFileUrl函数会处理）
                    item = { name: item, url: item };
                }
            } else if (item && typeof item === 'object') {
                // 如果已经是对象，确保url字段正确
                // 优先使用ossUrl作为显示URL
                if (item.ossUrl) {
                    item.url = item.ossUrl;
                }
            }
            item.uid = item.uid || new Date().getTime() + temp++;
            return item;
        });
    } else {
        fileList.value = [];
        return [];
    }
},{ deep: true, immediate: true });

```

### 修改 getFileUrl 函数，优化URL处理
```javascript
<!--src/components/FileUpload/index.vue-->
// 上传成功回调
function getFileUrl(url) {
    if (!url) return '';

    // 如果URL已经是完整格式（包含http/https），直接返回
    if (url.startsWith('http://') || url.startsWith('https://')) {
        return url;
    }

    // 如果URL是相对路径（以/开头），拼接基础URL
    if (url.startsWith('/')) {
        return `${baseUrl}${url}`;
    }

    // 其他情况（如不带斜杠的相对路径），也尝试拼接
    return `${baseUrl}/${url}`;
}

```

### 修改 listToString 函数，统一保存格式
```javascript
<!--src/components/FileUpload/index.vue-->
// 上传成功回调
function listToString(list, separator) {
    let strs = "";
    separator = separator || ",";
    for (let i in list) {
        if (list[i].url) {
            let url = list[i].url;

            // 如果需要保存相对路径而不是完整URL，可以在这里处理
            // 例如，如果是完整的OSS URL，可能需要转换为相对路径
            // 这取决于后端期望接收什么格式
            if (url && (url.startsWith('http://') || url.startsWith('https://'))) {
                // 如果后端需要完整URL，直接保存
                strs += url + separator;
            } else {
                // 如果后端需要相对路径，确保格式正确
                strs += url + separator;
            }
        }
    }
    return strs != '' ? strs.substr(0, strs.length - 1) : '';
}

```

### 优化 getFileName 函数
```javascript
<!--src/components/FileUpload/index.vue-->
// 上传成功回调
function getFileName(name) {
    if (!name) return '';

    // 如果是URL，提取文件名
    if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
    }
    // 如果包含反斜杠（Windows路径）
    else if (name.lastIndexOf("\\") > -1) {
        return name.slice(name.lastIndexOf("\\") + 1);
    }
    // 直接返回名称
    else {
        return name;
    }
}

```


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

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