「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」
大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高。上一篇文章是 微信小程序api蓝牙的使用 ；今天我们来学习一下element ui 表单组件使用,文本输入框，单选框，多选框，下拉框，重点是实现axios上传显示进度的功能。
文本输入框（最常用）
单行文本
<el-form-item label="名称">
<el-input v-model="form.user"></el-input>
</el-form-item>
多行文本
在el-input 标签里面加上 type="textarea"
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.text"></el-input>
</el-form-item>
单选框
这里显示在页面上的值是{{ item.name }} ，传给后台的数据是el-radio中的 lable的值 data里声明 brand_property 是个空字符
<el-form-item label="请选择类型">
<el-radio-group v-model="brand_property">
<el-radio
v-for="item in listOne1"
:key="item.id"
:label="item.id"
>{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
多选框
这里显示在页面上的值是{{ item.name }} ，v-model绑定的是el-radio中的 lable的值需要传给后台的数据 data里声明 service_capability 是个空数组
<el-form-item label="服务能力" prop="service_capability">
<el-checkbox-group v-model="service_capability">
<el-checkbox
v-for="item in listOne1"
:key="item.id"
:label="item.id"
name="service_capability">
{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
下拉框
//这里显示在页面的是el-option的label，v-model绑定的是el-option的value值是需要传给后台的数据 data里声明 ajor_class 是个空字符
<el-form-item label="主营品类" prop="major_class">
<el-select v-model="ajor_class" placeholder="请选择主营品类" >
<el-option
v-for="item in majorClasses"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
axios上传显示进度
HTML代码
<template>
<div class="upload"
<!-- 上传组件 -->
<el-upload
class="avatar-uploader"
action
accept="image/jpg,image/jpeg,image/png"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:http-request="httpUpload"
:data="{ path_type: 'cloud/kyc' }"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
// 进度条组件
<el-progress
v-if="progress && !imageUrl"
:text-inside="true"
:stroke-width="26"
:percentage="complete"
></el-progress>
</div>
</template>
JS代码
<script>
import axios from "axios";
export default {
data() {
return {
imageUrl: "",
filesList: [],
progress: false,
complete: "",
};
},
methods: {
//文件之前的钩子函数
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpg" || "image/jpeg" || "image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
},
// 覆盖默认的上传行为，可以自定义上传的实现(上传的请求在这里调用)
httpUpload(request) {
const { data, filename, file } = request;
let formData = new FormData();
for (let key in data) {
formData.append(key, data[key]);
}
formData.append(filename, file);
console.log(JSON.stringify(formData) + "111图片,formData");
this.progress = true;
axios
.post("http://api2.ngrok.ynhai.cn:82/v1/upload/index", formData, {
headers: {
"Content-Type": "multipart/form-data",
"user-token": "e5d59cc2-4eb3-b3f9-27b3-37e24cc3053d",
"x-shop-token": "e5d59cc2-4eb3-b3f9-27b3-37e24cc3053d",
},
//进度条显示数据的计算
onUploadProgress: (progressEvent) => {
console.log(progressEvent, "progressEventprogressEvent");
this.complete =
((progressEvent.loaded / progressEvent.total) * 100) | 0;
},
}).then((res) => {
this.imageUrl = res.data.data.src;
this.addFaultTypeList.image = res.data;
//此接口有返回一个id是需要传给后台的数据
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
效果如下图
这个上传功能只是我写的一个小demo,项目要用的话得封装一个可以灵活上传的组件,既可以上传图片也可以上传视频,本来我这里是想写的。但是代码很多，以后再选个时间写一篇关于封装上传功能的组件文章。
结语：
好了文章到此就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下。希望这篇文章对大家有帮助,也希望大家多多支持我，今天是我参与2022首次更文挑战的第16天，加油！
