原文地址:https://blog.csdn.net/a12541254/article/details/79187130
这边博文主要介绍的是使用element-ui的upload上传组件实现自定义多图上传的方式。
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方法
- //其他业务代码。
- }
- 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);
- }
- }