1.引入element-ui --- 复选框+上传+输入框
// element-ui
import {Checkbox, Input, Upload, CheckboxGroup } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.component( 'checkbox', Checkbox );
Vue.component( 'el-input', Input);
Vue.component( 'upload', Upload );
Vue.component( 'CheckboxGroup');
【上传组件】
<template>
<div>
<!--上传头像 type:img-->
<template v-if="type == 'img'">
<el-upload
class="upload-demo"
action="111"
:limit="limit"
:file-list="fileList"
:show-file-list=showFileList
:before-upload="beforeUpload"
:on-remove="handleRemove"
accept = "image/png,image/jpg,image/jpeg,image/gif">
<button class="dc-common-default-btn">
<img src="../assets/img/common/upload-icon.png" alt="">
<span>{
{placeholder}}</span>
</button>
<div class="el-upload__tip" slot="tip">{
{tip}}</div>
</el-upload>
</template>
<!--上传文件 type:file-->
<template v-else-if="type == 'file'">
<el-upload
class="upload-demo"
action="111"
:limit="limit"
:show-file-list=showFileList
:file-list="fileList"
:before-upload="beforeUpload"
:on-remove="handleRemove"
accept = "application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf,application/vnd.ms-powerpoint,text/plain">
<!--accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf,application/vnd.ms-powerpoint,text/plain,application/vnd.ms-works">-->
<button class="dc-common-default-btn">
<img src="../assets/img/common/upload-icon.png" alt="">
<span>{
{placeholder}}</span>
</button>
<div class="el-upload__tip" slot="tip">{
{tip}}</div>
</el-upload>
</template>
</div>
</template>
accept :限制上传的文件格式
action="111":上传的接口地址,可以写在这里,但是因为在项目中直接写在这里会产生跨域的问题,所以我的接口是写在
【相关方法】:
1.beforeUpload 上传前的方法里的。在这里判断是否获取数据,然后接口上传,图片上传之后,显示预览图。
2.handleRemove 点击删除方法之后将选择的数据中showList中删除。
public beforeUpload(val): any {
this.checkImg = true;
const me = this;
if ((this as any).type === 'file') { // 上传简历
const isLt10M = val.size / 1024 / 1024 < 10;
if (!isLt10M) {
// this.$message.error('上传头像图片大小不能超过 10MB!');
}
const form = new FormData();
fo