qimall/backend/modules/admin/views/setting/storage.php

<el-row>
    <el-col :span="24">
        <el-form-item label="存储方式">
            <el-radio-group v-model="ruleForm.storage.driver.value">
                <el-radio v-for="(val, key, i) in ruleForm.storage.driver.extra" :label="key">{{val}}</el-radio>
            </el-radio-group>
        </el-form-item>

        <div v-if="ruleForm.storage.driver.value == 'local'">
            <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;width: 60%;margin:10px 0 20px 0;">
                <div style="width: 5px;height: 20px;background-color: #03C5FF;margin-right: 5px;"></div>
                <div>本地存储</div>
            </div>

            <p class="tips-text">{{ruleForm.storage_driver.local.remark}}</p>
            <el-alert title="注意：在负载均衡模式下请使用云存储方式。" type="error" :closable="false" style="margin-top: 10px; width: 50%"></el-alert>
        </div>

        <div v-if="ruleForm.storage.driver.value == 'cos'">
            <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;width: 60%;margin:10px 0 20px 0;">
                <div style="width: 5px;height: 20px;background-color: #03C5FF;margin-right: 5px;"></div>
                <div>腾讯云存储</div>
            </div>

            <el-form-item label="存储空间名称（Bucket）">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.cos.value.bucket"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="所属地域">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.cos.value.area"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="自定义域名">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.cos.value.domain"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="SecretID">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.cos.value.secret_id"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="SecretKey">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.cos.value.secret_key"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>
        </div>

        <div v-if="ruleForm.storage.driver.value == 'oss'">
            <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;width: 60%;margin:10px 0 20px 0;">
                <div style="width: 5px;height: 20px;background-color: #03C5FF;margin-right: 5px;"></div>
                <div>阿里云存储</div>
            </div>

            <el-form-item label="存储空间名称（Bucket）">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.oss.value.storage_aliyun_bucket"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="endpoint或自定义域名">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.oss.value.storage_aliyun_endpoint"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="Access Key ID">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.oss.value.storage_aliyun_accesskeyid"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="Access Key SECRET">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.oss.value.storage_aliyun_accesskeysecret"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="访问路径">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.oss.value.storage_aliyun_user_url"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="访问协议">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.oss.value.storage_aliyun_transport_protocols"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="图片样式接口">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.oss.value.img_style_interface"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>
            <el-form-item label="角色ARN">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.oss.value.arn"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>
        </div>

        <div v-if="ruleForm.storage.driver.value == 'qiniu'">
            <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;width: 60%;margin:10px 0 20px 0;">
                <div style="width: 5px;height: 20px;background-color: #03C5FF;margin-right: 5px;"></div>
                <div>七牛云存储</div>
            </div>

            <el-form-item label="存储空间名称（Bucket）">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.qiniu.value.bucket"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="绑定域名">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.qiniu.value.domain"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="Access Key ID">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.qiniu.value.access_key_id"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="Access Key SECRET">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.qiniu.value.access_key_secret"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>

            <el-form-item label="图片样式接口">
                <el-col :span="12">
                    <el-input v-model="ruleForm.storage_driver.qiniu.value.img_style_interface"></el-input>
                    <p class="tips-text"></p>
                </el-col>
            </el-form-item>
        </div>
    </el-col>
</el-row>