精华内容
下载资源
问答
  • class="upload-demo" drag ref="fileUpload" :action="urls.fileUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" :on-progress="progressUpload" :before-upload=
  • 主要介绍了elemetUi 组件--el-upload实现上传Excel文件的实例的相关资料,希望通过本文大家能够实现这样的功能,需要的朋友可以参考下
  • elemetUi 组件–el-upload实现上传Excel文件的实例 【需求】实现上传Excel文件,在上传到服务器时,还要附加一个参数,在请求上传文件接口前,先要进行文件格式判断。 【知识点】  1、el-upload 官方文档中,主要...
  • 一、思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload。...el-upload class=upload-demo :file-list=fileList2 :action=domain :before-upload=beforeAvatarUpload :data=form :on-remo
  • <div class=upload-file> <el-upload accept=.xlsx ref=upload multiple :limit=5 action=http://xxx.xxx.xxx/personality/uploadExcel :on-preview=handlePreview :on-change=handleChange :o
  • 这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储,结合elementUI的el-upload组件实现图片上传功能(简单来说就是用户是老大) ...
  • 主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 上传头像 备注:不要自己设置请求头类型,让浏览器自己解析,如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误(415错误Unsupported Media Type);请将此配置注释掉;...
  • 主要介绍了vue结合el-upload实现腾讯云视频上传功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • template action 必选参数,上传后台接口地址 data 上传时附带的额外参数(图片2) on-success 上传成功执行函数 headers 设置上传的请求头部 multiple 是否支持多选文件,可以不写 :limit=“3” 最大允许上传个...el..

    在这里插入图片描述
    在这里插入图片描述

    template

    • action 必选参数,上传后台接口地址
    • data 上传时附带的额外参数(图片2)
    • on-success 上传成功执行函数
    • headers 设置上传的请求头部
    • multiple 是否支持多选文件,可以不写
    • :limit=“3” 最大允许上传个数,可以不写
    <div>
      <div class="medical-title">     
          <p  class="card-title">体检报告</p>
          <el-upload
            multiple
            class="upload-demo"
            :action="uploadUrl"
            :data="medicalData"
            :headers="headers"          
            :limit="3"
            :on-exceed="handleExceed"
            :on-success="successMedical"
            :show-file-list="false"
          >
          <p><i class="el-icon-plus" style="color:#407fff"></i>点击上传</p>
          </el-upload>
        </div>   
        <div>
          <el-table :data="fileList" style="width: 80%;margin-bottom:20px">
            <el-table-column prop="name" label="文件名" ></el-table-column>
            <el-table-column prop="uploadingTime" label="上传时间" ></el-table-column>
            <el-table-column >
              <template slot-scope="scope">
                <el-button type="text" @click="downMedical(scope.row)"> 下载</el-button>
                <el-button type="text" style="color:red" @click="removeMedical(scope.row)"> 删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>   
      </div>
    

    data数据

     uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
     headers: {
        Authorization: "Bearer " + getToken()
      },
      // 体检报告
      medicalData:{
        type:1,
        source: 1,
      },
      fileList: [],
    

    methodes

     //成功
     successMedical(file,fileList) {
         if(fileList.response.code === 200) {
           this.$message.success('上传成功')
           this.fileList.push(fileList.response.data)
         }
       },
       //删除
       removeMedical(val) {
         const index = this.fileList.findIndex(item => item.url===val.url )
         this.fileList.splice(index,1)
       },
       // on-exceed
       handleExceed(files, fileList) {
         this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
       },
    

    style

    .card-title{
      font-weight: 800;
      color: #323333;
    }
    .medical-title{
      width: 80%;
      display: flex;
      justify-content: space-between;
    }
    
    展开全文
  • <template> <el-upload drag :action="url" :limit="1" ref="imgUrl" :headers="token" accept="*" :before-upload="beforeUpload" :file-li...
    <template>
    	<el-upload
                  drag
                  :action="url"
                  :limit="1"
                  ref="imgUrl"
                  :headers="token"
                  accept="*"
                  :before-upload="beforeUpload"
                  :file-list="ruleForm.fileList"
                  :on-remove="handleRemove"
                  list-type="text"
                  :on-exceed="handleExceed"
                  :on-success="successHandle"
                  :data="requestParam"
                  :on-progress="beforeAvatarUpload"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">点击或文件拖拽到这里上传</div>
      </el-upload>
     <el-progress :percentage="percent" v-if="percent!=0"></el-progress>
    </template>
    <script>
    export default {
      name: "FileUpload",
      components: { },
      data() {
        return {
          ruleForm: {
            fileList: [],
          },
          url: "",// 后端给的接口上传地址
          token:  { Authorization: '具体的token值,请依据后端给的token' },// 设置上传的请求头部
          requestParam: { param: 12 },// 接口参数,file参数插件自动会添加,额外参数自己添加
          percent: 0,
        };
      },
      created() {
      },
      mounted() {},
      methods: {
        handleRemove(file, fileList) {
          console.log("删除文件");
          // 在此处调用具体的删除文件接口,删除需要的数据存储在this.ruleForm.fileList 里面
          this.ruleForm.fileList = [];
        },
        handleExceed(files, fileList) {
          this.$message.warning(
            `一次只能上传一个文件,本次选择了 ${files.length} 个文件,如果想要替换其他文件,请先将本次文件删除`
          );
        },
        successHandle(response, file, fileList) {
          console.log(response);// 接口请求的返回值
          console.log(file);
          console.log(fileList);
          this.ruleForm.fileList = response;
        },
        beforeAvatarUpload(event, file, fileList) {
          console.log("beforeAvatarUpload");
          console.log(event.percent);
          this.percent=event.percent;
          if(event.percent==100){
          	this.percent=0;
          }
          //   let loadProgress = Math.floor(event.percent); //这就是当前上传的进度
          //   //可以进行其他逻辑
        },
        beforeUpload(file) {
        	this.percent=0;
        	var isLt10M = file.size / 1024 / 1024 < 10;
          	if (!isLt10M) {
            	this.$message({
              		message: "上传文件大小不能超过 10MB!",
             		type: "warning"
           		});
           	 return isLt10M;
          }
        },
      },
    };
    </script>
    

    2.截图控制台。文件小,速度很快,直接进度100。文件很大的话,由于设置了接口请求超时的时间,请求没有结束,就断了连接。
    在这里插入图片描述

    展开全文
  • 拖拽上传: <br> <el-upload :action="actionUrl" drag> <i class="el-icon-upload">i> <div class="el-upload__text">将文件拖到此处,或点击上传em>div> el-upload> 效果如下: 3.2 显示图片 可以显示上传的...

    点此查看全部文字教程、视频教程、源代码

    1. 前言

    本篇文章的标题,应该是我写过的,关于Element组件介绍的文章里面,最长的一个了。

    无它,就是因为这个组件确实使用起来比较复杂,而且必须搭配上后端的讲解,才能到位。

    另外,我感觉对于el-upload上传组件的介绍,官方文档写的有点乱,不知道是的确有点乱,还是官方水平太高我看不懂。

    好了,本篇按我的思路来介绍下el-upload的用法。

    2. 基本用法

    2.1 前端部分

    el-upload上传组件的基本用法是非常简单的,代码如下:

     	基本用法:<br><br>
        <el-upload :action="actionUrl">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    
    actionUrl: 'http://127.0.0.1:8080/upload',
    

    只需要解释两点,一是actionUrl表示文件上传对应的后台服务地址,二是el-upload标签中间可以放置任何内容,点击中间的内容会触发弹窗选择文件,选中文件后会自动上传到指定actionUrl。

    上述代码效果如下,实现起来非常简单。
    在这里插入图片描述

    2.2 后端部分

    后端部分实现起来也很简单,接受一个文件然后存储即可,为了防止文件重名,此处我还添加了重命名机制,使用UUID代替原来的文件名进行存储。

    	@RequestMapping("/upload")
    	public String upload(@RequestParam("file") MultipartFile file) {
    		String filePath = "D:\\images\\";
    		String fileName = file.getOriginalFilename();
    		String fileType = fileName.substring(fileName.lastIndexOf("."), fileName.length());
    		String fileNewName = UUID.randomUUID() + fileType;
    		File targetFile = new File(filePath);
    		if (!targetFile.exists()) {
    			targetFile.mkdirs();
    		}
    		FileOutputStream out = null;
    		try {
    			out = new FileOutputStream(filePath + fileNewName);
    			out.write(file.getBytes());
    			out.flush();
    			out.close();
    		} catch (Exception e) {
    			e.printStackTrace();
    			return "";
    		}
    		return fileNewName;
    	}
    

    需要注意的是,后端返回值是存储的真实文件名,最后我们在提交的时候,可以将业务信息与真实文件名一起提交存入数据库,这样就能把业务信息和文件对应起来了。

    上传成功后界面显示如下,注意界面上显示的是上传文件的原名,不是后端返回的存储文件名。
    在这里插入图片描述

    2.3 获取后端返回信息

    有时候我们需要获取后端返回的文件存储名,以便将该文件信息存入数据库。此时我们可以通过on-sucess绑定一个方法,该方法在上传成功时调用,其参数中就有后端返回信息。

     	基本用法:<br><br>
        <el-upload :action="actionUrl" :on-success="handleSuccess">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    
    	handleSuccess(response, file, fileList) {
          console.log(response, file, fileList);
        },
    

    上传成功后,response即为后端返回值,另外file及fileList对象中也有后端返回值信息,感兴趣的可以从控制台详细查看了解。

    注意后端需要跨域,如果是Spring Boot项目的话,跨域代码参考如下:

    /**
     * CORS跨域配置类
     */
    @Configuration
    public class CorsConfig {
    	private CorsConfiguration buildConfig() {
    		CorsConfiguration corsConfiguration = new CorsConfiguration();
    		corsConfiguration.addAllowedOrigin("*");
    		corsConfiguration.addAllowedHeader("*");
    		corsConfiguration.setAllowCredentials(true);
    		corsConfiguration.addAllowedMethod("*");
    		return corsConfiguration;
    	}
    
    	@Bean
    	public CorsFilter corsFilter() {
    		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    		source.registerCorsConfiguration("/**", buildConfig());
    		return new CorsFilter(source);
    	}
    
    }
    

    3. 外观功能介绍

    接下来,介绍与外观相关的功能,el-upload可以通过修改参数,实现更好看的外观效果。

    3.1 拖拽上传

    通过设置drag属性即可启动拖拽上传,极其简单,当然控件中间的内容可以自定义,只要好看就行。

     	拖拽上传:<br><br>
        <el-upload :action="actionUrl" drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        </el-upload>
    

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

    3.2 显示图片

    可以显示上传的图片,在el-upload中添加img,然后上传成功后设置图片内容即可。

    	显示图片:<br><br>
        <el-upload :action="actionUrl" :limit="2" :on-success="handleSuccessWithImage">
          <el-button size="small" type="primary">点击上传</el-button>
          <img v-if="imageUrl" :src="imageUrl" class="my-image">
        </el-upload>
    
    	actionUrl: 'http://127.0.0.1:8080/upload',
        imageUrl: '',
    
    	handleSuccessWithImage(response, file, fileList) {
          this.imageUrl = URL.createObjectURL(file.raw);
        },
    

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

    3.3 设置文件列表样式

    如果觉得上面显示图片的方式不好看,没关系,el-upload提供了显示文件列表的方式,美观大方,而且使用很简单。通过list-type属性设置即可。(el-divider用于区分不同的演示内容,只是为了方便观看,跟本章内容没关系。)

    	设置文件列表样式(text):<br><br>
        <el-upload :action="actionUrl" list-type="text">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <el-divider></el-divider>
        设置文件列表样式(picture):<br><br>
        <el-upload :action="actionUrl" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <el-divider></el-divider>
        设置文件列表样式(picture-card):<br><br>
        <el-upload :action="actionUrl" list-type="picture-card">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <el-divider></el-divider>
    

    效果如下,可见后两种效果还是很好看的。
    在这里插入图片描述

    3.4 显示提示信息

    还可以在内部显示一些详细提示信息:

    	显示提示信息:<br><br>
        <el-upload :action="actionUrl">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">上传文件大小不能超过500kb</div>
        </el-upload>
        <el-divider></el-divider>
    

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

    4. 事件功能介绍

    上面介绍了el-upload的外观部分,如果要实现一些复杂功能,还需要借助事件来实现。

    4.1 限制上传文件数量

    可以通过limit属性设置文件上传的最大数量,同时通过on-exceed指定文件超出数量限制时的钩子方法。

    	限制上传数量:<br><br>
        <el-upload :action="actionUrl" :limit="2" :on-exceed="handleExceed">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">上传文件大小不能超过500kb,最多只能上传2个文件</div>
        </el-upload>
    
    	handleExceed(files, fileList) {
          console.log(files, fileList);
          this.$message.warning("最多只能同时上传2个文件");
        },
    

    4.2 限制上传文件类型和大小

    可以通过beforeUpload指定上传文件钱的钩子方法,该方法返回true则可以上传,返回false则终止上传。所以可以在该方法中限制上传文件的类型和大小,代码如下:

    	限制上传类型和大小:<br><br>
        <el-upload :action="actionUrl" :before-upload="beforeUpload">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    
    	beforeUpload(file) {
          let sizeByMb = file.size / 1024 / 1024;
          if (sizeByMb > 2) {
            this.$message.warning("上传文件不能超过2M");
            return false;
          }
          if (file.type != 'image/jpeg') {
            this.$message.warning("只能上传图片");
            return false;
          }
          return true;
        },
    

    当上传文件大于2M或者不是图片时,会弹出消息提示,并取消文件上传动作。

    4.3 移除文件处理

    当我们点击文件列表的删除按钮,移除文件时,有时候我们会希望将该消息事件传递到后端,并告知后端要移除文件的信息,此时可以接住on-remove实现。

    	移除文件处理:<br><br>
        <el-upload multiple :action="actionUrl" :on-remove="handleRemove">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    
     	handleRemove(file, fileList) {
          console.log(file, fileList);
        },
    

    file中包含移除文件的信息,此时可以发起ajax请求到后端处理响应逻辑。

    4.4 手动上传

    个别情况下,也会不希望选中文件后立即上传,而是先选择文件,再手工上传。通过auto-upload属性来实现:

    	手动上传:<br><br>
        <el-upload ref="myUpload" multiple :action="actionUrl" :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="btnUpload">上传到服务器</el-button>
        </el-upload>
    
    	btnUpload() {
          this.$refs.myUpload.submit();
        },
    

    5. 附带参数

    在上传文件时,例如上传Excel表格。有时候我们希望同时附带一些参数,例如Excel表格关联的部门编号等。此时可以通过data属性来指定。

    	附带参数:<br><br>
        <el-upload :action="actionUrl2" :data="uploadData">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    
          actionUrl2: 'http://127.0.0.1:8080/uploadWithParam',
          uploadData: {
            userId: '001'
          },
    

    后端同时接收文件和参数:

    	@RequestMapping("/uploadWithParam")
    	public String uploadWithParam(@RequestParam("file") MultipartFile file, @RequestParam("userId") String userId) {
    		System.out.println("userId:" + userId);
    		String filePath = "D:\\images\\";
    		String fileName = file.getOriginalFilename();
    		String fileType = fileName.substring(fileName.lastIndexOf("."), fileName.length());
    		String fileNewName = UUID.randomUUID() + fileType;
    		File targetFile = new File(filePath);
    		if (!targetFile.exists()) {
    			targetFile.mkdirs();
    		}
    		FileOutputStream out = null;
    		try {
    			out = new FileOutputStream(filePath + fileNewName);
    			out.write(file.getBytes());
    			out.flush();
    			out.close();
    		} catch (Exception e) {
    			e.printStackTrace();
    			return "";
    		}
    		return fileNewName;
    	}
    

    注意,可以再before-upload指定的钩子方法中修改上传的参数值。

    6. 附带请求头部

    在前后端分离的项目中,我们经常把验证信息放入headers头部,然后由前端传递到后端,此时可以接住headers属性实现。

    	附带请求头部:<br><br>
        <el-upload :action="actionUrl2" :data="uploadData" :headers="uploadHeaders">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    
    	  actionUrl2: 'http://127.0.0.1:8080/uploadWithParam',
          uploadData: {
            userId: '001'
          },
          uploadHeaders: {
            token: '123456'
          }
    

    后端SpringBoot程序可以通过拦截器接收,配置拦截器代码如下:

    /**
     * Web配置类
     */
    @Configuration
    public class WebConfig implements WebMvcConfigurer {
    	@Autowired
    	private MyInterceptor myInterceptor;
    
    	/**
    	 * 添加Web项目的拦截器
    	 */
    	@Override
    	public void addInterceptors(InterceptorRegistry registry) {
    		// 对所有访问路径,都通过MyInterceptor类型的拦截器进行拦截
    		registry.addInterceptor(myInterceptor).addPathPatterns("/**");
    	}
    }
    

    拦截器代码如下:

    /**
     * 自定义拦截器类
     */
    @Component
    public class MyInterceptor implements HandlerInterceptor {// 实现HandlerInterceptor接口
    
    	/**
    	 * 访问控制器方法前执行
    	 */
    	@Override
    	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    		String token = request.getHeader("token");
    		System.out.println("token:" + token);
    		return true;
    	}
    }
    

    7. 小结

    el-upload上传组件功能比较全面,使用起来也比较复杂,本篇给出了相对完整的介绍,大家可以参考实现。

    展开全文
  • 而今天要讲的就是这个优秀的框架中优秀的组件 el-upload 有过 element-ui 使用经验的小伙伴大概都用过它的上传组件(el-upload) 单独使用 el-upload 的文档已经很全面, 操作起来也很好用, 没毛病 但当 el-upload 遇上...

    虽然 element-ui 现在几乎不更新了, 但不能否认它的优秀
    而今天要讲的就是这个优秀的框架中优秀的组件 el-upload

    有过 element-ui 使用经验的小伙伴大概都用过它的上传组件(el-upload)
    单独使用 el-upload 的文档已经很全面, 操作起来也很好用, 没毛病

    但当 el-upload 遇上 v-for 时, 要面临的问题就多得多了
    笔者就曾遇到过, 特意写下此文

    注: 文末附完整 demo


    有一次, 我遇到了这样的需求:

    • 有一个数量可增可减的数组
    • 数组每项有上传图片功能



    我第一反应, 简单:

    <!-- 大概看下就行, 不是完整代码 -->
    <div v-for="(item, index) in lists">
    	<!--something-->
    	<el-upload></el-upload>
    	<button>删除</button>
    </div>
    <button>新建</button>
    

    搞掂



    Question 1

    经过几个回合的撸码, 该显示的都出来了:

    <!-- 大概看下就行, 不是完整代码 -->
    <div v-for="(item, index) in lists">
    	<el-upload :before-upload="handleBeforeUpload">
    		<i class="el-icon-plus"></i>
    	</el-upload>
    	<el-button type="danger" @click="remove(item, index)">删除</el-button>
    </div>
    <el-button type="primary" @click="add">新建</el-button>
    
    • 点两下 “新建”, 新建了两项
    • 选择个图片, 也如愿显示了
    • 删除第一项, 要命! 怎么第二项不见了

    这是因为 v-for 少了 key

    vue 与 react 不同, 循环里的 key 并不是强制要求, 很多时候列表里缺少 key 并没有任何问题
    但 新增删除项 属于必须有 key 的情况



    Question 2

    因为 handleBeforeUpload 是公共方法, 只传过去的图片, 就不能分辨该图片是来自第几项的
    所以给 handleBeforeUpload 带上了个参数 index

    <!-- 大概看下就行, 不是完整代码 -->
    <div v-for="(item, index) in lists" :key="item.key">
    	<el-upload :before-upload="handleBeforeUpload(index)">
    		<i class="el-icon-plus"></i>
    	</el-upload>
    	<el-button type="danger" @click="remove(item, index)">删除</el-button>
    </div>
    <el-button type="primary" @click="add">新建</el-button>
    
    handleBeforeUpload(file) {
    	console.log(file)
    },
    

    不加还好好的, 可加上 index 后 handleBeforeUpload 接收到的 file 就成了 index 的值, 原本的 file 不见了

    这是因为, 原始dom数据被 index 覆盖了, 在 handleBeforeUpload() 里就没有 file 的踪影

    缺少原始数据, 还不简单, 用 $event 就可以解决了



    Question 3

    又是一番焦头烂额, 代码改成这样

    <!-- 大概看下就行, 不是完整代码 -->
    <div v-for="(item, index) in lists" :key="item.key">
    	<el-upload :before-upload="handleBeforeUpload($event, index)">
    		<i class="el-icon-plus"></i>
    	</el-upload>
    	<el-button type="danger" @click="remove(item, index)">删除</el-button>
    </div>
    <el-button type="primary" @click="add">新建</el-button>
    

    可这个时候, 控制台直接就报错了

    [VUE WARN]:未在实例上定义属性或方法“$event”,但在呈现期间引用了该属性或方法。通过初始化属性,确保此属性是反应性的,无论是在“数据”选项中,还是对于基于类的组件。

    至于啥意思呢? 老实说我不是很懂, 不过以我的经验想, “$event 出问题了”

    这时候注意到 :before-upload="", before-upload 并不是触发事件的属性, 它的功能仅仅是把方法传递下去, 所以在这个位置用 $event 是不明智的



    Question 4

    在这山穷水尽的状况下, 我决定狠一把, 索性就用闭包的思路, 把 el-upload 封装成一个组件来用

    <!-- 参考文末的完整 demo -->
    

    思路大概是这样的

    1. 把 el-upload 封装成一个新组件 MyUpload
    2. 把 el-upload 需要的参数, 方法全部传给 MyUpload
    3. 把 index 也传给 MyUpload
    4. 以 before-upload 为例, 给 el-upload 设置 :before-upload=“imgBeforeUpload”
    5. 当 el-upload 触发 before-upload 时, 执行 imgBeforeUpload
    6. imgBeforeUpload 里接受到 file, 这时候只需要用 arguments 和 uploadId 把数据传入 MyUpload 继承下来的 beforeUpload 方法
    7. 最后在父组件中就能取到需要的 file 数据和对应的 index 数据了


    总结

    • v-for 要加上 key
    • 如 before-upload, 不能使用 $event, 如果传入数据, 就会把原始数据覆盖
    • 将 el-upload 组件再次封装, 成为新组件, 这样才能既保存原始数据, 又传入自定义数据


    完整 demo

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<title>当 el-upload 遇上 v-for 时应该注意的问题</title>
    		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    		<!--<link rel="stylesheet" href="./jvw/element-ui/element-ui@2.4.0/element-ui.2.4.0.css">-->
    	</head>
    
    	<body>
    
    		<div id="swq">
    			<App></App>
    		</div>
    
    		<script type="text/x-template" id="App-template">
    			<div>
    				<div v-for="(item, index) in lists" :key="item.key">
    					<my-upload :action="ossSign.host" :uploadId="index" :param="param" :fileList="item.faceList" :before-upload="handleBeforeUpload" :onSuccess="handleOnSuccess" :onError="handleOnError"></my-upload>
    					<el-button type="danger" @click="remove(item, index)">删除</el-button>
    				</div>
    				<el-button type="primary" @click="add">新建</el-button>
    			</div>
    		</script>
    
    		<script type="text/x-template" id="MyUpload-template">
    			<div>
    				<el-upload :action="action" :limit="1" :data="param" :file-list="fileList" :before-upload="imgBeforeUpload" :on-success="imgSuccess" :on-error="imgError" list-type="picture-card">
    					<i class="el-icon-plus"></i>
    				</el-upload>
    			</div>
    		</script>
    
    		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.6/vue.min.js"></script>
    		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.js"></script>
    		<!--<script src="./jvw/vue/vue.2.5.16.js"></script>-->
    		<!--<script src="./jvw/element-ui/element-ui@2.4.0/element-ui.2.4.0.js"></script>-->
    
    		<script type="text/javascript">
    			var MyUpload = {
    				template: "#MyUpload-template",
    				props: {
    					action: null,
    					param: {},
    					uploadId: null, //接收到的自定义的参数
    					beforeUpload: Function,
    					onSuccess: Function,
    					onError: Function,
    					onRemove: Function,
    					fileList: null,
    				},
    				data: function() {
    					return {}
    				},
    				methods: {
    					imgRemove() {
    						this.onRemove(...arguments, this.uploadId);
    					},
    					imgSuccess() {
    						this.onSuccess(...arguments, this.uploadId);
    					},
    					imgError() {
    						this.onError(...arguments, this.uploadId);
    					},
    					imgBeforeUpload(file) {
    						this.beforeUpload(...arguments, this.uploadId);
    					},
    				},
    			};
    			var App = {
    				template: "#App-template",
    				data: function() {
    					return {
    						ossSign: {
    							host: 'https://jsonplaceholder.typicode.com/posts/',
    							key: ''
    						},
    
    						param: {},
    
    						lists: [{
    							faceList: [],
    							key: this.getRandom(),
    						}],
    
    						dialogImageUrl: '',
    						dialogVisible: false,
    					}
    				},
    				components: {
    					MyUpload,
    				},
    				methods: {
    					handleOnSuccess(response, file, fileList, uploadId) {
    						console.log("handleOnSuccess: ", response, file, fileList, uploadId)
    					},
    
    					handleOnError(response, file, fileList, uploadId) {
    						console.log("handleOnError: ", response, file, fileList, uploadId)
    					},
    
    					handleBeforeUpload(file, uploadId) {
    						console.log("handleBeforeUpload: ", file, uploadId)
    					},
    
    					add() {
    						this.lists.push({
    							faceList: [],
    							key: this.getRandom(),
    						})
    					},
    
    					remove(item, index) {
    						this.lists.splice(this.lists.indexOf(item), 1);
    					},
    
    					getRandom() {
    						// 生成个临时 key
    						return ~~(Math.random() * 10000) + "" + Date.now()
    					},
    
    				},
    			};
    			var vu = new Vue({
    				el: "#swq",
    				components: {
    					App: App,
    				},
    			})
    		</script>
    	</body>
    
    </html>
    

    //end

    展开全文
  • 前言 在最近的开发中遇到了一个需求是,批量上传文件后,禁止对上传的文件进行删除与再次上传的功能。(这里有另外的按钮全部清空上传... class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
  • el-upload class="step_content" drag action="string" ref="upload" :multiple="false" :http-request="createAppVersion" :data="appVersion" :auto-upload="false" :limit="1" :on-change=...
  • el-upload-list__item-thumbnail" :src="file.url"> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click...
  • el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="(file) => be...
  • el-form表单的实现及非空验证 本文所实现的表单验证是普通的输入验证,若想自定义表单验证规则,可以前往elementUI官方文档进行学习。 表单验证可以理解为以下几个步骤: 1、在 el-form 上添加规则对象,名称可...
  • 介绍 项目中发现使用默认的el-upload上传动作发送上传请求的时候不会带上请求头,于是想通过... class="upload-demo" action="" :http-request="uploadMehod" :before-remove="beforeRemove" :limit="1" :fil
  • 1.表单代码 <el-form :model="addForm" size="mini" :rules="rules" ref="addForm"> <el-row> <el-col :span="24">...el-form-item label="附件" prop=...el-upload ref="fileupload" :data="ad
  • 1.el-upload组件accept值用字符串数据绑定,before-upload方法无效。改成自身accept=".pdf, .doc, .docx, .rar,.zip,.exe,.pptx",才有效。
  • el-upload代码: 1、嵌套dialog自定义 修改如下: dialog代码: 完整代码: 总结 功能要求 点击修改头像,弹出上传框 选择文件上传后弹出校验框 因头像为一张,确认、取消、关闭窗口需清空列表 效果展示 ...
  • vue+el-upload实现单文件多文件上传 1、单文件上传 <el-form-item :label="$... class="upload-demo" action="#" :headers="myHeaders" :before-remove="beforeRemove" :on-change="nowFile" :multiple="false
  • html代码:弹框:表单中包含图片上传的组件el-upload //html <!-- 弹框 --> <div class="dialog"> <el-dialog :title="formTitle" :visible.sync="dialogFormVisible"> <el-form :model.....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,525
精华内容 7,810
关键字:

el-upload