精华内容
下载资源
问答
  • element upload上传单个文件,并覆盖 <template> <div style="width:500px"> <el-upload class="upload-demo" drag action="" multiple :file-list="fileList" :auto-upload="false" :on...

    element upload 只上传单个文件,并覆盖,获取文件的文本内容

    vue-running 在线运行地址

    <template>
      <el-upload
        ref="upload-text"
        class="upload-demo"
        drag
        action=""
        :auto-upload="false"
        :on-change="handleChange"
        :http-request="uploadHandler"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处,或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          上传文件,且不超过500kb
        </div>
      </el-upload>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      methods: {
        handleChange(file, fileList) {
          if (file.size > 1024 * 500) {
            fileList.pop();
            this.$message({
              message: "单个文件不超过500k!",
              type: "error"
            });
          }
          if (file.status === "ready") {
            // 已上传文件列表如果存在 2 条记录,移除第一条,实现替换效果
            if (fileList.length === 2) {
              fileList.shift();
            }
          }
          this.$refs["upload-text"].submit();
        },
        uploadHandler(params) {
          this.readText(params);
        },
        async readText(params) {
          // UTF-8,GBK,GB2312
          const readFile = new FileReader();
          readFile.onload = e => {
            console.log("e.target.result", e.target.result);
          };
          readFile.readAsText(params.file);
        }
      },
      mounted() {}
    };
    </script>
    
    
    

    其他文章——element upload 只传一张图片样式,和表单一起提交

    展开全文
  • 使用element-ui中的上传组件,upload,这个默认发送post请求, 在使用upload组件自动携带的请求方式发送 action->请求的url on-success->...是否在选取文件后立即进行上传,默认是true(选取文件上传) na...

    1.使用htttp-request自定义上传

    在这里插入图片描述
    使用element-ui中的上传组件,upload,这个默认发送post请求,
    在使用upload组件自动携带的请求方式发送
    action->请求的url
    on-success->请求发送成功的钩子–方法function(response, file, fileList)默认参数3个
    auto-upload->是否在选取文件后立即进行上传,默认是true(选取文件即上传)
    name->上传的文件字段名,默认值file,后台有时候需要发送别的字段名如image就这修改
    data->上传时附带的额外参数object
    disabled->是否禁用,默认false
    http-request->覆盖默认的上传行为,可以自定义上传的实现–方法(当请求方式不为post可以自定义方式)

    下面是两个例子
    1.使用upload默认请求方式post发送提交图片请求,后台要求文件字段image
    在这里插入图片描述
    在这里插入图片描述
    在文件上传成功后,可以从response的data属性获取图片在服务器上的路径,文件的具体信息在file.raw中
    在这里插入图片描述
    2.使用upload上传文件,发送patch请求数据,需要使用http-request钩子
    由于覆盖了其默认请求,updateImg中异步请求携带了路径,action中就随便放了个网址,action是必传参数
    在这里插入图片描述
    http-reques钩子有个默认参数,val.file可以获取文件数据信息
    在这里插入图片描述
    在这里插入图片描述

    2.使用手动上传

    需求背景: 有个form表单, 通过上传组件获取上传文件信息, 点击弹窗的确定按钮后,接口统一进行上传;
    限制上传zip类型文件,不超过10M,限制选择1个zip包
    在这里插入图片描述
    在这里插入图片描述

    <!-- 文件上传-->
    <el-form :rules="rules" :model="dataForm" ref="dataForm" label-width="150px" @submit.native.prevent>
          <el-form-item label="名称:" prop="name">
            <el-input type="text" v-model.trim="dataForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="文件:" prop="file" >
            <el-upload
                class="upload-import"
                ref="uploadImport"
                action="https://baidu.com/" <!-- 手动上传, action随便给了个地址-->
                :on-remove="handleRemove"
                :file-list="fileList"
                :limit="1" <!-- 限制上传数量-->
                :on-change="handleChange"
                :auto-upload="false"	<!-- 关闭自动上传-->
                accept="application/zip,.zip">  <!-- 设置接收的文件类型-->
                <!-- el-upload组件,在手动上传时,禁用按钮外, 还需要设置    :disabled="hasFile"   为true禁用该组件,会导致上传列表也被禁用,无法删除,因此使用v-show,文件数量为1时,显示禁用的的按钮, slot不绑定trigger事件 --> 
              <el-button v-show="!hasFile" slot="trigger" size="small" type="primary" >选取文件</el-button>
              <el-button v-show="hasFile"  size="small" type="primary" disabled>选取文件</el-button>
              <div slot="tip" class="el-upload__tip">只能上传zip文件,且不超过10M</div>
            </el-upload>
          </el-form-item>
     </el-form>
    
    <script>
    export default {
    	data(){
    		return {
    			dataForm: {
    	          name: '',
    	          file: null
    	        },
    	        rules: {
    	          name: [
    	            {required: true, message: "请输入名称", trigger: "blur"},
    	            {max: 50, message: "最长可输入50个字符", trigger: "blur"},
    	            {validator: isvalidatName, trigger: "blur" },
    	          ],
    	          file: [
    	            {required: true, message: "请选择上传文件", trigger: "blur"},
    	          ]
            },
            hasFile: false,
            fileList: []
    	},
    	methods: {
    		 handleRemove(file, fileList) {
    	        if (!fileList.length) {
    	          this.hasFile = false;
    	        }
    	        this.dataForm.file = null;
    	      },
    	      handleChange(file, fileList) {
        	    if (fileList.length >= 2) {
    	          return;
    	        }
    	        if (fileList.length === 1) {
    	          this.hasFile = true;
    	        }
    	        this.dataForm.file = file;
    	      },
    	      //确定按钮
    	      onSureHandle(){
    				this.$refs.dataForm.validate(valid => {
    					if(valid){
    						let dataPar = this.dataForm;
    						
    						let fdParams = new FormData();
    						fdParams.append('name', dataPar.name);
    						fdParams.append('file', dataPar.file.raw);
    
    					axios.post('/interface/importProject', fdParams, {
    							headers: {'Content-Type': 'multipart/form-data'},//定义内容格式,很重要
    							timeout: 20000,
    						}).then(response => {
    							//...some logic
    						}).catch(err =>{})						
    					}
    				})
    		  }
    	}
    }
    </script>
          ```
    
    
    展开全文
  • el-upload上传文件前读取文件内容

    千次阅读 2020-10-14 18:09:45
    el-upload action="https://www.baidu.com/" :auto-upload="false" :on-change="handelOnChange" :file-list="fileList" > <button>点击上传</button> </el-upload>

    效果图:

    在这里插入图片描述

    代码

    DOM部分

    <div class="box">
        <el-upload
          action="https://www.baidu.com/"
          :auto-upload="false"
          :on-change="handelOnChange"
          :file-list="fileList"
        >
          <button>点击上传</button>
        </el-upload>
        <audio v-if="audioUrl" :src="audioUrl" controls></audio>
    </div>
    

    JS部分

    data() {
        return {
          uploadUrl: "", // 上传录音请求URL
          audioUrl: "", //录音的URL
          fileList: [],
        };
      },
      methods: {
        handelOnChange(res, file) {
          if (res) {
            var reader = new FileReader();
            reader.readAsDataURL(res.raw);
            reader.onload = (e) => {
              this.audioUrl = reader.result;
            };
          }
          this.fileList = [file[file.length - 1]];
        },
      },
    
    展开全文
  • antd upload上传获取文件宽高

    千次阅读 2020-08-07 18:25:49
    项目新加的需求,需要判断上传图片的宽高,查了一下antd-upload组件貌似不支持这个查询,因此需要使用外部的API,直接上代码:beforeUpload 方法 handleBeforeUpload = async (file, fileList) => { const {...

    项目新加的需求,需要判断上传图片的宽高,查了一下antd-upload组件貌似不支持这个查询,因此需要使用外部的API,直接上代码:beforeUpload 方法

    handleBeforeUpload = async (file, fileList) => {
            const {fileMinSize = 0,fileMinWH,fileMaxWH, fileMaxSize = 50,uploadFormat = '',uploadFormatError = ''} = this.component.props;
            const isInRange = ((file.size > (fileMinSize * 1024 * 1024)) && (file.size < (fileMaxSize * 1024 * 1024)));
            let isTrueType = true,isFileWH = true;//类型,尺寸
            return new Promise((resolve, reject) =>{
                //校验格式
                if(uploadFormat != ''){
                    let acceptArr = uploadFormat.split(',');
                    let fileType = file.name.substring(file.name.lastIndexOf('.'));
                    if(!acceptArr.includes(fileType)){
                        isTrueType = false;
                        this.message.error((uploadFormatError == '') ? '请上传规则范围内的文件!' : uploadFormatError);
                        this.base.ss({'data.fileList': fileList.pop()});
                    }
                }
                //校验大小
    
                if (!isInRange) {//大小的标识
                    this.message.error((fileMaxSize == 50) ? '请上传规则范围内的文件!' : '文件最大不能超过'+ fileMaxSize + 'M!');
                    this.base.ss({'data.fileList': fileList.pop()});
                }
    
    
                //校验宽高
                /*********************************/
    
                if(fileMinWH && fileMaxWH){//做下过滤有的图片需要过滤
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = (e) => {
                        //加载图片获取图片真实宽度和高度
                        var image = new Image();
                        image.src=reader.result;
                        image.onload = () =>{
                            var width = image.width;//图片的宽
                            var height = image.height;//图片的高
                            if(width < fileMinWH  || width > fileMaxWH || height < fileMinWH  || height > fileMaxWH){
                                isFileWH = false;
                                this.message.error('***宽高需要均大于600像素,小于4000像素');
                                this.base.ss({'data.fileList': []});
                                reject();
                            }else{
                                resolve(isFileWH && isInRange && isTrueType)
                            }
                        };
                    };
                    /**********************************/
                }else{
                    resolve(isInRange && isTrueType);
                }
            })
        };

    这样这个功能就可以完美的解决了,*包着的代码是最主要的。

    展开全文
  • 在后台通过his.getServletContext().getRealPath("/upload)获取upload文件的地址 结果报错: C:\Users\Adm\IdeaProjects\reg_login\out\artifacts\reg_login_war_exploded\upload\7a115d135f694fd689d9a6c...
  • 但是因业务要求,经常对上传文件做限制要求,如只能上传jpg格式的图片,仅能上传xls的excel表格(xls和xlsx的内容读写java使用的是不同的jar包)。 这类需求可以通过ajax在后台进行处理,但是为了减少对系统的压力...
  • ThinkPHP之Upload上传文件

    千次阅读 2017-05-03 19:47:47
    Upload.class.php文件位于:\ThinkPHP\Library\Think\Upload.class.php  可以打开源文件,查看下,具体的过程是如何实现的,当然也可以解决自己的一些疑惑,就像刚开始$upload->upload()竟没有传递参数,我觉得很奇怪 ...
  • // 此处是压缩包中的test.txt文件,返回String类型(此时在回调的参数中已经可以获取上传的zip压缩包下的所有文件) . then ( function ( content ) { console . log ( content ) // 这个就是.txt...
  • elementui upload 上传文件详解

    千次阅读 多人点赞 2019-07-21 23:09:52
    各位同学,请希望看完,如果看了开头不看结尾, 代码错误请不要怪我。...说说今天在使用elemenui中 upload 组件的时候,一开始看有好多属性,然后我仔细看了,并总结了以下它的使用和常用属性的作用。 lim...
  • 本文主要是解决文件与表单一起上传时,需要验证文件类型,如何验证文件类型。如何将表单其它项与文件一起提交保存暂不做说明。 看了官方得文档 使用钩子函数:before-upload="beforeAvatarUpload" ...
  • Iview upload 上传文件

    2020-06-30 10:52:48
    打开模态框 上传文件, 文件限制 一次一个文件,关闭模态框modal 清除历史文件列表 如图: template <Modal v-model="import_modal" title="导入"> <!-- 去除按钮 自定义页脚 --> <div slot=...
  • html代码: <el-upload id="audioUpload" class="avatar-uploader" :action="upLoadAudio" :show-file-list="true" :multiple="false" ...
  • iview upload上传文件(自动上传、手动上传) 自动上传,不需要附带其他除文件外的信息 手动上传,除文件之外,还需要附带其他信息,如文件描述等等,一起上传 重点在于设置请求头部为 'Content-Type': 'multipart/...
  • 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"> 选择...
  • vue upload 上传文件之删除文件

    千次阅读 2020-07-16 23:07:14
    在做图片上传时,用Element UI 组件库 upload组件,图片上传时通过文档流的形式,例如下面代码中的action的地址,需要提前协商好,但是Vue官网对删除只介绍了其中的一些并没有实现图片的删除功能, handleRemove...
  • layui中upload上传文件并传递参数

    千次阅读 2019-11-19 15:26:18
    使用layui写文件上传功能,需要传入id和tablename两个参数 layui.upload.render({ elem:'#id', url:'接口路径', accept:'file', size:'传入文件的大小', before: function (){ this.data = { id: '传入id...
  • element-ui Upload 上传文件

    千次阅读 2020-05-17 21:02:23
    element-ui Upload 上传文件 需求描述:如图所示,upload 只是用来选择文件,在点击提交的时候再和其他的数据统一上传,并且要限制该文件只能上传一个,为用户最后选择的那个文件。 不使用 action 属性 上传 官方...
  • File Upload文件上传

    千次阅读 2019-04-19 01:02:02
    文件上传漏洞:攻击者上传了一个可执行的脚本文件,通过此脚本文件获得了执行服务器端命令的功能。文件上传是否会产生漏洞关键在于服务器怎么来处理,怎么来解析这个文件。如果说服务器处理的模式不够安全,那么就会...
  • React Antd Upload上传文件前弹窗询问

    千次阅读 2020-03-30 11:17:25
    React Antd Upload上传文件前弹窗询问1、导入Upload组件2、使用Upload组件3、配置Upload组件 1、导入Upload组件 Import { Upload } from ‘antd’ 别问react中怎么配置antd,问就是不知道,只是听说可以使用 $ npm ...
  • antd Upload 文件上传

    万次阅读 2018-10-11 16:14:40
    1.antd官网Upload组件: ...3.文件上传的实现: (1)方法一:antd默认上传。 a:渲染文件上传组件。getPDFURL()方法为实现文件上传。showUploadList为是否展示 uploadList, true显示,false不显示,其可设...
  • 在Angular项目中使用ng2-file-upload上传文件
  • element 框架 el-upload 上传文件问题

    千次阅读 2018-12-25 11:19:04
    在使用Vue+element 中的el-upload组件做文件上传时,最根本的原因是把路径写错,导致系统提示跨域错误,直接看代码: &lt;el-upload :action="targetAction" :show-file-list="false" ...
  • Angular2使用ng2-file-upload上传文件

    千次阅读 2017-07-07 20:09:34
    Angular2使用ng2-file-upload上传文件ng2-file-upload是一个功能比较全面的上传文件的支持库 (参考:http://www.jianshu.com/p/0741186f60ab https://segmentfault.com/a/1190000007886391) Angular2使用ng2-...
  • 做项目时遇到上传excel文件到后台,项目使用的是elementUI组件,直接使用element的Upload上传,但是需求是需要用户选择完文件,并且输入文件描述,然后一起上传到后台,类似于form表单提交   (1).vue html  ...
  • 接触vue时间也不少了,最近用el-upload给后端上传文件,饿了么上传文件api个人感觉 action不是很好用。上传文件不断报错,经过几天的测试,终于得到了axios上传文件的方法,记录下,供大家参考 二.步骤 步骤一:...
  • vue中使用el-upload上传文件

    千次阅读 2020-05-18 15:25:37
    //文件上传成功时的钩子 :on-success="success" //文件上传失败时的钩子 :on-error='error' //是否支持多选文件 multiple //上传时附带的额外参数 :data="datadir" //设置上传的请求头部 :headers=.
  • 嵌入组件 <el-upload accept="image/jpeg,image/gif,image/png" class="upload-demo upload-tip" :action="uploadUrl()" :on-preview="handlePreview".
  • ajaxUpload异步上传文件后报错:Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 97,452
精华内容 38,980
关键字:

获取upload上传的文件内容