但是在搜索经验的时候，发现很多网友给出的代码有缺失，不适合小白开发

所以，小小整理一番，欢迎指摘 …

操作步骤：

首先 html 设计效果如下：

对应的源码为：

 <div class="layui-form-item">
        <label class="layui-form-label">主题类型：</label>
            <div class="layui-input-inline" style="width: 660px">
                <input type="radio" name="level" lay-filter="levelM" value="1" title="一级分类" {$theme.level=="1"?"checked":""}>
                <input type="radio" name="level" lay-filter="levelM" value="2" title="二级分类" {$theme.level=="2"?"checked":""}>
                <input type="radio" name="level" lay-filter="levelM" value="3" title="三级分类" {$theme.level=="3"?"checked":""}>
            </div>
    </div>

上传、预览、下载图片是app常用的功能之一，一般的做法是建立一个图片存储服务器，再开发一个接收前端上传文件的后端服务，接收到前端上传的图片文件，然后再调用存储服务器的接口完成图片文件的存储。

现在阿里云提供了对象存储云服务（OSS），非常方便APP直接将图片等文件上传上去，并提供了多种浏览、下载的方式，不仅操作简单、而且效率高、速度快，本文介绍三种使用方式，希望能够让工程师少走弯路。

传统模式

这种方式只是把OSS作为文件存储体替代了自建存储器，上传逻辑和路径还是和传统的方式一致，后端服务给前端提供上传接口，在收到前端上传的文件后，再调用阿里云的OSS SDK的API将文件上传到阿里云的OSS存储桶中。

介绍

vuestic是基于Vue 3 的 开源免费UI 库，托管在Github上，基于 MIT 开源协议。是目前Github上为数不多的基于Vue3的开源组件库。

Github地址

Vue基础入门，第21节，表单数据的收集与提交

1、定义1个表单

    <form>
        <p>姓名：<input type="text" v-model.trim="account"></p>
        <p>密码：<input type="text" v-model="password"></p>
        <p>网龄：<input type="number" v-model.number="age"></p>
        <p>
            性别：
            <input type="radio" name="sex" v-model="sex" value="male">男
            <input type="radio" name="sex" v-model="sex" value="female">女
        </p>
        <p>明星：
            <input type="checkbox" name="star" v-model="star" value="linagjinru">梁静茹
            <input type="checkbox" name="star" v-model="star" value="rongzuer">容祖儿
            <input type="checkbox" name="star" v-model="star" value="youhongming">游鸿明
        </p>
        <p>
            旅游：
            <select v-model="city">
                <option value="">你去过哪里？</option>
                <option value="bejing">西藏</option>
                <option value="shanghai">新疆</option>
                <option value="chongqing">内蒙</option>
                <option value="guangzhou">云南</option>
            </select>
        </p>
        <p>
            其他：
            <textarea v-model.lazy="other"></textarea>
        </p>
        <p><input type="checkbox" v-model="yes"> 确定你说的没有问题吗？</p>
        <p><input type="button" value="提交" @click.prevent="submit"></p>
    </form>

介绍

Vue Formulate是使用Vue构建表单的最简单方法。主要功能包括表单和字段验证，文件上传，表单生成，支持标签的单元素输入，帮助文本，错误消息，占位符等，以及在自己的项目中使用的全面文档。

Github