精华内容
下载资源
问答
  • 最近在使用Element UI做项目的时候,使用到了Upload 上传组件,因为要实现明确name的文件才可以上传,使用到了before-upload方法,发现 当auto-upload为false的时候,before-upload方法失效 当auto-upload为true的...

    最近在使用Element UI做项目的时候,使用到了Upload 上传组件,因为要实现明确name的文件才可以上传,使用到了before-upload方法,发现

    当auto-upload为false的时候,before-upload方法失效

    当auto-upload为true的时候,before-upload方法有效

    展开全文
  • repo upload 提示 no branches ready for upload

    千次阅读 2019-07-30 21:43:42
    1.repo upload 提示 no branches ready for upload https://blog.csdn.net/jinbaippdpdpdpdpd/article/details/74837987 2.repo: no branches ready for upload http://www.voidcn.com/article/p-pofzamuv-ga.html ...

    1.repo upload 提示 no branches ready for upload
    https://blog.csdn.net/jinbaippdpdpdpdpd/article/details/74837987

    2.repo: no branches ready for upload
    http://www.voidcn.com/article/p-pofzamuv-ga.html

    展开全文
  • antd Upload 文件上传

    万次阅读 2018-10-11 16:14:40
    1.antd官网Upload组件: https://ant.design/components/upload-cn/ 2.下图是最近开发的上传文档的效果:   3.文件上传的实现: (1)方法一:antd默认上传。 a:渲染文件上传组件。getPDFURL()方法为...

    1.antd官网Upload组件:

    https://ant.design/components/upload-cn/

    2.下图是最近开发的上传文档的效果:

     

    3.文件上传的实现:

    (1)方法一:antd默认上传。

    a:渲染文件上传组件。getPDFURL()方法为实现文件的上传。showUploadList为是否展示 uploadList, true显示,false不显示,其可设为一个对象,用于单独设定 showPreviewIcon 和 showRemoveIcon。type为上传按钮的图标。如下图所示。

    {/* 渲染文件上传组件 */}
      <Upload {...this.getPdfURL()} showUploadList={false}>
         <Button>
           <Icon type="upload" /> 上传文件
         </Button>
      </Upload>

    b:getPDFURL()方法为实现文件的上传。name是发到后台的文件参数名。action为上传文件的地址。accept是接受上传的文件类型。headers是设置上传的请求头部,IE10 以上有效。onChange是上传文件改变时的状态。代码如下图所示。

    下面为代码:

    getPdfURL = () =>{
            const _this = this;
            const props = {
                name: 'file',
                action: AjaxUrl + 'data/modelFileUpload.svt?cou_id=' + this.state.cou_id,{/*文件上传接口和需要的传参*/}
                accept:"application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",{/*接受上传的文件类型:此处为.doc格式*/}
                headers: {
                    authorization: 'authorization-text',
                },
                onChange(info) {//上传文件改变时的状态
                    if (info.file.status !== 'uploading') {
                        console.log(info.file, info.fileList);
                    }
                    if (info.file.status === 'done') {
                        message.success(`${info.file.name} 上传成功!`);
                        _this.setState({
                            pdfUrl:AjaxUrl + info.file.response.url,
                            wordName:info.file.response.wordName
                        })
    
                    } else if (info.file.status === 'error') {
                        message.error(`${info.file.name} 上传失败!`);
                    }
                },
            };
            return props;
        }

    注意:accept可以用于设置接口不同类型的文件类型,其不同文件类型设置可参考:https://www.haorooms.com/post/input_file_leixing

    (2)方法二:使用customRequest通过覆盖默认的上传行为,自定义自己的上传实现。

    a:渲染文件上传组件。accept是接受上传的文件类型。customRequest通过覆盖默认的上传行为,customRequest()方法是自定义自己的上传实现。fileList是已经上传的文件列表(受控)。

    <Upload
          accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          customRequest={this.customRequest}
          beforeUpload = {this.beforeUpload}
          fileList={this.state.fileList}
                    >
         <Button>
           <Icon type='upload' />上传
         </Button>
    </Upload>

    b:customRequest()方法是自定义自己的上传实现。

     

     customRequest = (option)=> {
              const formData = new FormData();
              const fileUrl = AjaxUrl+"data/fileUpload.svt";
              formData.append('files[]',option.file);
             
              reqwest({ /*官网解释:It's AJAX
                            All over again. Includes support
                            for xmlHttpRequest, JSONP, CORS,
                             and CommonJS Promises A.*/
                url: fileUrl,
                method: 'post',
                processData: false,
                data: formData,
                success: (res) => {
                  //res为文件上传成功之后返回的信息,res.responseText为接口返回的值
                  let fileInfo = JSON.parse(res.responseText);
                  if(res){
                    this.setState({
                        fileInfo:fileInfo,
                        loading: false,
                        uploading: false,
                        defaultFile:false
                    })
                  }
                  
                },
                error: () => {
                  this.setState({
                      loading: false,
                      uploading: false
                  })
                  message.error("文件上传失败!");
                },
              });
          }

    注意:reqwest其实就是ajax异步请求。更多了解参考: https://www.npmjs.com/package/reqwest

    说明:上述内容均是自己在开发过程中总结出来,或许还有不足之处,但是希望有些内容能够帮到大家,谢谢观赏!

     

     

     

     

     

     

    展开全文
  • 这几天要在网站上增加一个图片从剪切板粘贴上传的功能,想利用el-upload组件来进行这个功能。 但是el-upload在官网里只写了file-list,它表示已上传文件列表(就是后面打了绿色勾勾的,已经上传成功了的) 那么el-...

    这几天要在网站上增加一个图片从剪切板粘贴上传的功能,想利用el-upload组件来进行这个功能。
    但是el-upload在官网里写的file-list参数不够满足我的需求,因为它表示已上传文件列表(就是后面打了绿色勾勾的,已经上传成功了的),我想改变的是已选择文件列表(包括已上传和未上传)。

    那么el-upload里是否有哪个属性可以表示已选择文件列表呢?答案是有的,就是uploadFiles属性,在这里push,就可以达到和使用el-upload的选择文件按钮同样的效果。
    当然,要记得设置好文件的status属性。

    this.$refs.upload.uploadFiles.push(newFile);
    

    另外,要将通过GetAsFile()得到的文件类型进行一步file.raw = file,将file本身添加到它的raw属性里才可以进行上传,不然会报找不到uid的错,这个我还没研究明白是怎么回事,可能是el-upload对文件的格式有特殊要求。

    展开全文
  • before-upload 与 auto-upload的状态是有关系的 当auto-upload为true时 before-upload方法才会被触发
  • Upload上传图片

    千次阅读 2019-12-05 15:45:10
    实现antd上传图片,Upload 组件可以上传多张图片,多张图片上传成功的效果图: 每次上传onChange 回调函数都会执行一次并且里面接收一个JSON对象,其中 file 对象是本次上传的图片信息,status 值为 done 就表示...
  • iview upload 组件

    千次阅读 2019-10-21 10:43:39
    单张图片上传 <template> <Upload style="margin-left:40px;margin-top:10px;" ref="upload" :before-upload="beforeImgFile" :on-success="successIm...
  • element-ui upload组件 上传文件类型限制

    万次阅读 多人点赞 2019-04-28 14:29:51
    1.先说一下我遇到的问题 其中接受类型已经加了accept 但是当选择弹出本地选择文件时候切换到所有文件 之前的文件类型就本根过滤不掉了 ...el-upload class="c-upload" ref="upload" :action="actions" :...
  • el-upload 上传图片后 如何清空 在el-upload中加入 ref='upload’ <el-upload ref='upload'//清空图片数组的 class="upload-demo" action="../wzlb/upload" ...
  • 最近在用element的上传组件的时候,发现一个互斥问题 重现: 1:auto-upload设置为false ...auto-upload设置为false的时候,before-upload事件是不起作用的; 解决办法: 使用on-change事件来代替before-upload ...
  • nginx upload module

    2017-04-14 05:24:37
    [图片说明](https://img-ask.csdn.net/upload/201704/14/1492147408_631955.png) 错误日志: ![图片说明](https://img-ask.csdn.net/upload/201704/14/1492148883_409662.png) 创建文件失败,后面的文件 应该怎么...
  • [ WebUpload ] WebUpload 插件初始化问题

    千次阅读 2018-01-23 10:26:21
    WebUpload 插件初始化问题 本文主要针对WebUpload 文件上传插件在初始化多个时,插件自定义按钮显示位置错位导致点击失效的问题提供解决方案。(亦可描述为webupload插件在父容器display属性为none的情况下初始化...
  • iview upload上传文件

    千次阅读 2019-12-19 18:28:21
    Upload ref="upload" type="drag" multiple :show-upload-list="true" :before-upload="handleUpload" :data="uploadFile" :on-success="uploadSuccess" action="/api/company/upload"> 选择...
  • 标签中添加before-upload的hock <el-upload class="avatar-uploader" :action="baseUrl + '/v1/addimg/shop'" :show-file-list="false" :on-success="handleShopAvatarScucess" :before-upload=...
  • react Upload 组件

    千次阅读 2018-07-13 10:23:16
    import React, { Component } from 'react';import {Link, IndexLink, hashHistory} from "react-router"...export default class Upload extends Component { constructor(props){ ...
  • elementUI el-upload自定义参数

    万次阅读 2019-07-03 18:37:42
    elementUI el-upload 上传文件 自定义参数elementUI 提供的Upload 没有自定义回调参数可以通过以下两种方式实现方法一: data传参,官网提供的data方式方法二: 很多场景下,页面使用到多个el-upload组件,这个时候...
  • 想要禁止el-upload弹出本地选择文件窗口,只需要用到一个方法就行了 :disabled=“authenStatus==0?true:false” template代码 <el-upload :disabled="authenStatus==0?true:false" //此处直接写上判断条件,...
  • layui upload附件上传

    千次阅读 2019-07-16 14:29:50
    1.layui upload动态生成js // 附件上传 // elemId:上传button, elemFile:文件存放地址 function fileUpload(elemId,elemFile){ var $ = layui.jquery, upload = layui.upload; var allFiles = ''; // 附件存放...
  • jquery.upload.js

    热门讨论 2013-09-18 15:49:53
    1 在页面引入jquery.upload js 2 代码 view source print? 01 // upload_img 为一个按钮, 点击时选择文件上传 02 $("#upload_img").click(function() { 03 // 上传方法 04 $.upload({ 05 // 上传地址 06 url: '...
  • iview Upload上传

    千次阅读 2018-09-10 17:25:41
    &lt;FormItem label="...Upload class="uploadButton" ref="uploadButton" :on-success="handleUploadSuccess" :format="uploadFormat" :on-format-error=
  • vue 视频上传el-upload

    万次阅读 多人点赞 2019-01-19 19:49:56
    vue 视频上传 采用element-ui视频上传组件el-upload &lt;el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" //上传地址 :show-file-lis...
  • Vue:使用elementUI upload组件上传excel文件

    万次阅读 热门讨论 2019-09-23 17:20:45
    elementUI官方的upload组件文档可点此查看。 页面效果如下所示,支持文件的二次确认上传 demo中仅以excel举例,若需要支持其他格式,可修改accept值,具体代码如下: <template> <div> <el-...
  • element-ui upload上传技巧

    万次阅读 热门讨论 2018-09-28 10:26:49
    本文章应用场景是: 前端使用的是vue.js和element-ui。 上传是包含在一个表单...而且element-ui的upload组件上传的路径跟表单保存的路径是不一样的。具体看代码。  &lt;!-- 新增弹窗--&gt; &lt...
  • el-upload自定义上传方法

    万次阅读 多人点赞 2018-11-15 17:19:54
    el-upload自定义上传的坑 :http-request 指令的使用 使用该指令, :on-success, :on-error 指令是不会触发的 &lt;el-form-item label="logo" prop="logo"&gt; &lt;el-upload ...
  • element-ui中el-upload多文件一次性上传

    万次阅读 多人点赞 2019-06-14 10:23:29
    项目需求是多个文件上传,在一次请求中完成,而ElementUI的上传组件是每个文件发一次上传请求,因此我们借助...div class="upload-file"> <el-upload accept=".xlsx" ref="upload" multiple :limit="5...
  • iview Upload组件的坑

    千次阅读 2019-07-08 09:26:00
    iview Upload 上传显示进度条的坑 直接先来光放代码 上官方文档 demo 代码 <template> <div class="demo-upload-list" v-for="item in uploadList"> <template v-if="item.status === 'finished'...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 212,173
精华内容 84,869
关键字:

upload