如何用Vue、SpringBoot、Element UI和vue-resource实现长尾词文件上传？

本文共计325个文字，预计阅读时间需要2分钟。

在Vue页面中配置el-upload组件，设置class为upload-demo，action为空，绑定before-upload和before-remove方法，禁用多选，自定义文件上传逻辑，代码如下：

vue页面设置

<el-upload class="upload-demo" action="" :before-upload="beforeUpload" //上传前操作 :before-remove="beforeRemove" //移除钱操作 :multiple="false" //禁止多选 :xxx.cn/xx/file/uploadImg/" name='photo' :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item>

handleAvatarSuccess(res, file) { console.log(res) console.log(file) this.imageUrl = URL.createObjectURL(file.raw); console.log(this.imageUrl) }, //验证图片格式 beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; },

css代码

/* 图片上传css */ .avatar-uploader /deep/.el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 100px; height: 100px; line-height: 100px; text-align: center; } .avatar { width: 100px; height: 100px; display: block; }

参考elementUI文档：element.eleme.cn/#/zh-CN/component/upload

以上这篇vue+springboot+element+vue-resource实现文件上传教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。