vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
2018-01-28 15:45
1921 查看
这边博文主要介绍的是使用element-ui的upload上传组件实现自定义多图上传的方式。
element-ui的upload上传组件,如果是多图上传,实际上在请求中为单个文件上传,只是提交方法中自循环,直至上传文件列表为空为止。
不多说上代码:
HTML:
JS:
php
element-ui的upload上传组件,如果是多图上传,实际上在请求中为单个文件上传,只是提交方法中自循环,直至上传文件列表为空为止。
不多说上代码:
HTML:
<el-upload class="upload-demo" action="http://localhost:80" :limit='5' :auto-upload="false" :on-exceed='uploadOverrun' ref="upload" :http-request='submitUpload' :on-change='changeUpload'> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload>
<el-button @click = 'submitAssess'>提交到服务器</el-button>
JS:
uploadOverrun: function() { this.$message({ type: 'error', message: '上传文件个数超出限制!最多上传5张图片!' }); }, changeUpload: function(file, fileList) {//预览图片 this.fileList = fileList; this.$nextTick( () => { let upload_list_li = document.getElementsByClassName('el-upload-list')[0].children; for (let i = 0; i < upload_list_li.length; i++) { let li_a = upload_list_li[i].children[0]; let imgElement = document.createElement("img"); imgElement.setAttribute('src', fileList[i].url); imgElement.setAttribute('style', "max-width:50%;padding-left:25%"); if (li_a.lastElementChild.nodeName !== 'IMG') { li_a.appendChild(imgElement); } } }) }, submitUpload: function(content) {//自定义的上传图片的方法 //1. 创建formData 利用AXIOS传递 let formData = new FormData; formData.append('file', content.file); let config = { 'Content-Type': 'multipart/form-data' } let var_this = this; axios.post('/Index/upload', formData, config) .then(function(response) { if (!response.data.success) { var_this.$message({ message: response.data.message, type: 'error' }); } }) .catch(function(error) { console.log(error); }) }, submitAssess: function() {this.$refs.upload.submit(); //调用submit方法 //其他业务代码。 }
php
public function upload(){ //上传文件 if(!empty($_FILES)) { if(!empty($_SESSION)){ //拼接路径 $filePathArr = explode('/', $_SERVER['SCRIPT_FILENAME']); array_pop($filePathArr); $filePath = implode('/', $filePathArr); $filePath .= '/static/upload/'; if(!is_dir($filePath)){ //创建文件夹 mkdir($filePath); } $filePath .= Session::get('user').'-->'.md5(time()).$_FILES['file']['name']; if(move_uploaded_file($_FILES["file"]["tmp_name"],$filePath)){ $filePath = str_replace($_SERVER['CONTEXT_DOCUMENT_ROOT'],"",$filePath); //其他业务代码.我在制作此处时,我先将图片存入数据库 }else{ $data = returnData(false,'对不起,操作失败!请稍候再试!'); } }else{ $data = returnData(false,'请登录后再试!'); } echo json_encode($data); } }
相关文章推荐
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- 在vue项目中使用element-ui的Upload上传组件的示例
- 在vue项目中使用element-ui的Upload上传组件
- Vue上传文件:ElementUI中的upload实现
- vue2.0使用weui.js的uploader组件上传图片
- 七牛云图片上传:使用element-ui的upload组件
- 解决使用elementUI框架el-upload上传组件时session丢失问题
- vue+elementui的table行内实现el-upload文件添加/多文件上传
- 阿里OSS Java-SDK带进度条上传,配合前端element-ui upload组件使用示例
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
- 项目开发技巧(四):使用JspSmartupload实现文件上传下载(一):JspSmart之upload组件源码及使用
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
- 前端使用FormData实现上传文件
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
- 使用INDY TCP组件实现基于协议采用XML方式的文件传输
- java使用smartupload组件实现文件上传的方法
- 使用PHP和HTML5 FormData实现无刷新文件上传教程