返回

如何优化这段代码？ <template> <view class="max-w-xl m-auto pb-[80px]"> <v-nav-bar title="企业信息" left-text="返回" back-url="/pages/index/index" /> <view class="pt-3 px-3"> <uni-forms :model="formData" label-position="top" :label-width="150"> <uni-forms-item label="主要负责人持证" name="principal_certificate"> <u-upload :fileList="formData.principal_certificate" @afterRead="afterRead1" @delete="deletePic1" :maxCount="1" :previewFullImage="true" /> </uni-forms-item> <uni-forms-item label="安全管理机构" name="safety_management_agency_upload"> <u-upload :fileList="formData.safety_management_agency_upload" @afterRead="afterRead2" @delete="deletePic2" :maxCount="1" :previewFullImage="true" /> </uni-forms-item> <uni-forms-item label="营业执照" name="business_license_code"> <u-upload :fileList="formData.business_license_code" @afterRead="afterRead3" @delete="deletePic3" :maxCount="1" :previewFullImage="true" /> </uni-forms-item> <view class="h-[38px] leading-[38px] mx-14 mt-10"> <up-button :throttleTime="1000" type="primary" text="提交" @tap="onSubmit" data-eventsync="true" /> </view> </view> </view> <v-tabbar /> </template> // 表单数据 const formData = reactive({ principal_certificate: [], safety_management_agency_upload: [], business_license_code: [], industry_qualification: [], flat: [], business_scope_img: [], safety_officer_certificate: [], safety_license: [], emergency_record_license: [], live_photos: [], emergency_evacuation: [] }) const files = reactive({ list1: [], list2: [], list3: [], list4: [], list5: [], list6: [], list7: [], list8: [], list9: [], list10: [], list11: [] }) // 主要负责人持证 const afterRead1 = async (event) => { try { uni.showLoading({ title: "请稍后..." }) const result = await uploadFile(event.file.url) files.list1.push({ url: result.url }) formData.principal_certificate.push(result.url) } catch (error) { console.log(error) } finally { uni.hideLoading() } } const deletePic1 = (event) => { files.list1.splice(event.index, 1) formData.principal_certificate.splice(event.index, 1) } // 安全管理机构 const afterRead2 = async (event) => { try { uni.showLoading({ title: "请稍后..." }) const result = await uploadFile(event.file.url) files.list2.push({ url: result.url }) formData.safety_management_agency_upload.push(result.url) } catch (error) { console.log(error) } finally { uni.hideLoading() } } const deletePic2 = (event) => { files.list2.splice(event.index, 1) formData.safety_management_agency_upload.splice(event.index, 1) } // 营业执照 const afterRead3 = async (event) => { try { uni.showLoading({ title: "请稍后..." }) const result = await uploadFile(event.file.url) files.list3.push({ url: result.url }) formData.principal_certificate.push(result.url) } catch (error) { console.log(error) } finally { uni.hideLoading() } } const deletePic3 = (event) => { files.list3.splice(event.index, 1) formData.principal_certificate.splice(event.index, 1) }

如何优化这段代码？ <template> <view class="max-w-xl m-auto pb-[80px]"> <v-nav-bar title="企业信息" left-text="返回" back-url="/pages/index/index" /> <view class="pt-3 px-3"> <uni-forms :model="formData" label-position="top" :label-width="150"> <uni-forms-item label="主要负责人持证" name="principal_certificate"> <u-upload :fileList="formData.principal_certificate" @afterRead="afterRead1" @delete="deletePic1" :maxCount="1" :previewFullImage="true" /> </uni-forms-item> <uni-forms-item label="安全管理机构" name="safety_management_agency_upload"> <u-upload :fileList="formData.safety_management_agency_upload" @afterRead="afterRead2" @delete="deletePic2" :maxCount="1" :previewFullImage="true" /> </uni-forms-item> <uni-forms-item label="营业执照" name="business_license_code"> <u-upload :fileList="formData.business_license_code" @afterRead="afterRead3" @delete="deletePic3" :maxCount="1" :previewFullImage="true" /> </uni-forms-item> <view class="h-[38px] leading-[38px] mx-14 mt-10"> <up-button :throttleTime="1000" type="primary" text="提交" @tap="onSubmit" data-eventsync="true" /> </view> </view> </view> <v-tabbar /> </template> // 表单数据 const formData = reactive({ principal_certificate: [], safety_management_agency_upload: [], business_license_code: [], industry_qualification: [], flat: [], business_scope_img: [], safety_officer_certificate: [], safety_license: [], emergency_record_license: [], live_photos: [], emergency_evacuation: [] }) const files = reactive({ list1: [], list2: [], list3: [], list4: [], list5: [], list6: [], list7: [], list8: [], list9: [], list10: [], list11: [] }) // 主要负责人持证 const afterRead1 = async (event) => { try { uni.showLoading({ title: "请稍后..." }) const result = await uploadFile(event.file.url) files.list1.push({ url: result.url }) formData.principal_certificate.push(result.url) } catch (error) { console.log(error) } finally { uni.hideLoading() } } const deletePic1 = (event) => { files.list1.splice(event.index, 1) formData.principal_certificate.splice(event.index, 1) } // 安全管理机构 const afterRead2 = async (event) => { try { uni.showLoading({ title: "请稍后..." }) const result = await uploadFile(event.file.url) files.list2.push({ url: result.url }) formData.safety_management_agency_upload.push(result.url) } catch (error) { console.log(error) } finally { uni.hideLoading() } } const deletePic2 = (event) => { files.list2.splice(event.index, 1) formData.safety_management_agency_upload.splice(event.index, 1) } // 营业执照 const afterRead3 = async (event) => { try { uni.showLoading({ title: "请稍后..." }) const result = await uploadFile(event.file.url) files.list3.push({ url: result.url }) formData.principal_certificate.push(result.url) } catch (error) { console.log(error) } finally { uni.hideLoading() } } const deletePic3 = (event) => { files.list3.splice(event.index, 1) formData.principal_certificate.splice(event.index, 1) }
用户857365697
2023年10月28日
|
浏览 208
前端

对于这段代码的优化，可以考虑以下几点：

  1. 减少重复代码：可以将相似的上传逻辑封装成一个函数，减少代码的冗余。例如，可以将afterRead和deletePic的逻辑封装成一个函数，然后根据传入的参数动态确定对应的数据和文件列表。

  2. 异步操作的优化：可以使用Promise.all()方法来同时上传多个文件，提高上传的效率。

  3. 代码可读性的优化：可以使用更具有语义化的变量名，让代码更易读。

下面是对代码进行优化后的示例：

复制代码
<template>
    <!-- 省略其他代码 -->
    <uni-forms :model="formData" label-position="top" :label-width="150">
        <uni-forms-item label="主要负责人持证" name="principal_certificate">
            <u-upload
                :fileList="formData.principal_certificate"
                @afterRead="handleUpload('principal_certificate', afterRead)"
                @delete="handleDelete('principal_certificate', deletePic)"
                :maxCount="1"
                :previewFullImage="true"
            />
        </uni-forms-item>
        <uni-forms-item label="安全管理机构" name="safety_management_agency_upload">
            <u-upload
                :fileList="formData.safety_management_agency_upload"
                @afterRead="handleUpload('safety_management_agency_upload', afterRead)"
                @delete="handleDelete('safety_management_agency_upload', deletePic)"
                :maxCount="1"
                :previewFullImage="true"
            />
        </uni-forms-item>
        <uni-forms-item label="营业执照" name="business_license_code">
            <u-upload
                :fileList="formData.business_license_code"
                @afterRead="handleUpload('business_license_code', afterRead)"
                @delete="handleDelete('business_license_code', deletePic)"
                :maxCount="1"
                :previewFullImage="true"
            />
        </uni-forms-item>
    </uni-forms>
    <!-- 省略其他代码 -->
</template>

<script>
// 表单数据
const formData = reactive({
    principal_certificate: [],
    safety_management_agency_upload: [],
    business_license_code: [],
    // 省略其他字段
})

const files = reactive({
    principal_certificate: [],
    safety_management_agency_upload: [],
    business_license_code: [],
    // 省略其他字段
})

// 上传文件的通用逻辑
const handleUpload = async (field, uploadFunc) => {
    try {
        uni.showLoading({ title: "请稍后..." })
        const event = files[field][files[field].length - 1]
        const result = await uploadFunc(event.file.url)
        files[field].push({
            url: result.url
        })
        formData[field].push(result.url)
    } catch (error) {
        console.log(error)
    } finally {
        uni.hideLoading()
    }
}

// 删除文件的通用逻辑
const handleDelete = (field, deleteFunc) => {
    const event = files[field][event.index]
    files[field].splice(event.index, 1)
    formData[field].splice(event.index, 1)
}

// 主要负责人持证
const afterRead = (url) => {
    // 自定义的上传文件逻辑
    return new Promise((resolve, reject) => {
        // 上传成功后 resolve(result)
        // 上传失败后 reject(error)
    })
}

const deletePic = (index) => {
    // 删除文件的逻辑
}

// 安全管理机构
// 省略其他上传和删除的函数

export default {
    // 省略其他代码
}
</script>

请注意，上述示例中的handleUpload和handleDelete函数需要根据实际情况自行实现。另外，示例中的上传和删除逻辑只是一个简化的示例，实际应用中可能需要根据具体的业务需求进行调整。

我要提问
复制内容
分享给好友
AI编程问答网 免责声明：
以上内容除特别注明外均来源于网友提问，AI编程问答网回答，权益归原著者所有；
 
上一篇：vue3事件的第一个参数为event，第二个参数为用户自定义参数，怎么传才能不影响event
下一篇：如何优化这段代码？