vue2+elementui上传照片方式(el-upload超简单)
作者:奶糖 肥晨
这篇文章主要介绍了vue2+elementui上传照片方式(el-upload超简单),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element上传附件(el-upload 超详细)
这个功能其实比较常见的功能,后台管理系统基本上都有,这就离不开element的el-upload
展示:
代码展示
html代码
<el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove" action="" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :http-request="httpRequest"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload>
data中
fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
methods中
//实现图片上传功能 httpRequest(item) { // var imgId = item.file.lastModified console.log(item.file.name); this.fileList[0].name = item.file.name var formData = new FormData() formData.append('file', item.file) // { // // 设置请求头为 multipart/form-data // headers: { // 'Content-Type': 'multipart/form-data' // }, // // // 上传进度 // // onUploadProgress: progressEvent => { // // let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0 // // //调用onProgress方法来显示进度条,需要传递个对象 percent为进度值 // // item.onProgress({ percent: percent }) // // } // } upload(formData) .then(res => { this.fileList[0].name = item.file.name console.log(res); }) .catch(() => { }) }, handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); }, handleExceed(files, fileList) { this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); }, beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${file.name}?`); },
接口写法
// 上传图片 export function upload(data) { return request({ url: '/upload', method: 'post', data, headers: { 'Content-Type': 'multipart/form-data' }, }) }
总结
这个功能确实是非常常见的,尤其在后台管理系统中,文件上传功能几乎是标配。而Element UI,作为一个基于 Vue 的高质量 UI 组件库,其 el-upload 组件提供了非常便捷的文件上传功能。
el-upload 组件允许开发者轻松地实现文件选择、上传、预览以及错误处理等功能。通过简单的配置和事件监听,开发者可以定制上传按钮的样式、上传进度显示、上传成功或失败后的回调函数等。此外,el-upload 还支持多种上传方式,如拖拽上传、多文件上传等,极大地丰富了用户的使用体验。
在后台管理系统中,文件上传功能通常与表单管理、用户管理等模块紧密结合。
例如,管理员可能需要上传用户头像、更新系统配置文件、导入导出数据等。在这些场景中,el-upload 组件都能够发挥出其强大的作用。
除了基本的文件上传功能外,开发者还可以结合后端接口,实现更加复杂的文件处理逻辑,如文件校验、断点续传、文件加密等。这些高级功能可以进一步提升文件上传的效率和安全性,满足各种复杂的业务需求。
el-upload 组件作为 Element UI 中的一个重要组件,为开发者提供了便捷、高效的文件上传解决方案。无论是在后台管理系统中,还是在其他需要文件上传功能的场景中,它都能够发挥出其独特的优势,帮助开发者快速构建出稳定、可靠的文件上传功能。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。