uniapp实现图片上传和回响配合uview组件_uniapp uview u-upload上传与回显-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_49210750/article/details/129307664

本文介绍如何在uni-app项目中利用uView UI框架的组件，实现图片的上传功能，包括选择图片、预览、上传到服务器，并讨论了与后端接口的配合过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <view class="pageContainer">
                <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
                <view class="fs16 gold-color flex flexJcCenter mt60" v-if="model1.status == 1">
                    {
   {$t('您已经成功入驻')}}
                </view>
                <template v-else>
                    
                    <view class="toptitle flex flexJcSpaceBetween">
                        <view class=""><img src="/static/tzgg.png" style="width: 30px;" alt=""></view>
                        <view class="shu"></view>
                        <view class="">
                            {
   {$t('温馨提示认真填写等待审核')}}
                        </view>
                    </view>
                    <u--form
                        labelPosition="left"
                        :model="model1"
                        :rules="rules"
                        ref="form1"
                        style='    margin: 0px 15px;'
                    >
                        <u-form-item
                            :label="$t('入驻类型')"
                            prop="radiovalue1"
                            borderBottom
                            labelWidth="80"
                            ref="item1"
                            class="itemdate"
                        >
                            <u-radio-group v-model="Brand" @change="groupChange">
                                <u-radio
                                    :customStyle="{marginRight: '16px'}"
                                    v-for="(item, index) in radiolist1"
                                    :key="index"
                                    :label="item.name"
                                    :name="item.name"
                                    activeColor="#F6BC70"
                                >
                                </u-radio>
                            </u-radio-group>
                        </u-form-item>
                        <u-form-item
                            :label="$t('数字类型')"
                            prop="numbertype"
                            borderBottom
                            labelWidth="80"
                            @click="showNumbertype = true; hideKeyboard()"
                            ref="item9"
                            class="itemdate"
                        >
                            <u--input
                                    v-model="model1.numbertype"
                                    disabled
                                    disabledColor="#ffffff"
                                    :placeholder="$t('请选择类型')"
                                    border="none"
                            ></u--input>
                            <u-icon
                                    slot="right"
                                    name="arrow-right"
                            ></u-icon>
                        </u-form-item>
                        <u-form-item
                            :label="$t('场馆名称')"
                            prop="name"
                            borderBottom
                            ref="item2"
                            labelWidth="80"
                        >
                            <u--input
                                v-model="model1.name"
                                border="none"
                                :placeholder="$t('请填写公司名称(必填)')"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            :label="$t('联系方式')"
                            prop="contact"
                            borderBottom
                            ref="item3"
                            labelWidth="80"
                        >