vue element上传文件并使上传文件按钮和其他按钮显示在同一行

vue element上传文件并使上传文件按钮和其他按钮显示在同一行

<el-form>
	<el-form-item >
	<!-- 文件上传按钮 -->
	<el-upload
		class="upload-demo"
        action="http://localhost:9002/educenter/member/upImg"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList">
       	<el-button type="primary" style="margin-right: 100px" slot="trigger">点击上传</el-button>
        <el-button type="primary" @click="gotoClick()">技术文档</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
	</el-upload>
	</el-form-item>
</el-form>

重点:给需要触发上传文件的button按钮加上slot=“trigger”,否则的话点击任意一个按钮都会上传文件

效果如下:
在这里插入图片描述

你可能感兴趣的:(前端)