精华内容
下载资源
问答
  • 2020-08-18 11:58:28

    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 只传一张图片样式,和表单一起提交

    更多相关内容
  • el-upload class="step_content" drag action="string" ref="upload" :multiple="false" :http-request="createAppVersion" :data="appVersion" :auto-upload="false" :limit="1" :on-change=...
  • <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> [removed] ...如上面的代码,用文件上传对话框选择文件后,如果选择”D:\\temp\file\test.txt”文
  • 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]];
        },
      },
    
    展开全文
  • 最近在做一个仿知乎网站的项目了,里面涉及很多图片...如果你的MEDIA_ROOT是/media/文件夹,而你的上传文件夹upload_to=“avatar”, 那么你上传文件会自动存储到/media/avatar/文件夹。 class UserProfile(models.Mo
  • 在Thingworx中使用File Upload组件上传图片,GetFileListingWithLinks获取图片路径保存到数据库,提供图片查询功能。

    背景

    实现功能:在Thingworx中使用File Upload组件上传图片,保存图片路径到数据库,提供图片查询功能。

    本人测试过Thingworx8.5+版本都可以,以前的版本没有测试过。

    解决方案

    1、使用File Upload上传图片时会选择仓库,记住仓库名,这里使用的SystemRepository。

    2、全局搜索SystemRepository,找到SystemRepository下的方法Services->>GetFileListingWithLinks然后运行。

    3、上图中输出结果/Thingworx/FileRepositories/SystemRepository/背景.jpg就是图片下载/显示地址。

    4、在Mashups中使用Image组件显示图片,选择使用New Image URL显示,将/Thingworx/FileRepositories/SystemRepository/背景.jpg填入即可。

     


    知晓如何获取、展示图片的方法后,如何和数据库结合起来使用就很简单了:上传时将图片地址保存到数据库,查看时将地址作为参数传入。

    展开全文
  • element-ui中upload组件获取上传文件信息

    万次阅读 多人点赞 2019-10-17 19:38:22
    使用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>
          ```
    
    
    展开全文
  • antd upload上传获取文件宽高

    千次阅读 2020-08-07 18:25:49
    项目新加的需求,需要判断上传图片的宽高,查了一下antd-upload组件貌似不支持这个查询,因此需要使用外部的API,直接上代码:beforeUpload 方法 handleBeforeUpload = async (file, fileList) => { const {...
  • Upload组件是自带上传进度,但是样式调起来很麻烦,我们要做的就是自定义一个 首先页面要引入组件 Upload, Progress uploadAttachmentsProps = { action: `/api/upload`, showUploadList: false, // 这里关闭...
  • 使用 iview Upload 上传组件 手动上传 包括单个文件和多个文件 思路:创建一个数组 把需要上传文件 push到这个数组里面 1.引用组件 2.手动上传,根据官方文档 设置:before-upload =”handleUpload”等于false (1)...
  • element ui 读取upload上传文件并显示

    千次阅读 2022-04-06 14:49:48
    在vscode插件 webview中读取文件并显示 <div id="hostAdd" class="content"> <div class="content-inner content600 newhost"> <div class="content-title align-center">新建目标机</div&...
  • 解决thinkphp3.2出现Class 'Think\Upload' not found的问题,下载后直接扔到ThinkPHP\Library\Think下面直接解压出来然后刷新你的程序就能解决
  • 在前端加上一个name属性 在后端接口部分使用@RequestParam注解接收该属性即可
  • el-upload上传组件获取文件,file转为base64
  • 背景:使用React的antd组件的Upload(官网),要求文件上传后,在点击提交时再将文件传过去。 技术点:完全控制的文件上传。可控制上传数量。控制文件格式。移除时的事件onRemove。状态、数量改变onChange事件等。...
  • 1、 request.files.to_dict() 其输出是: {'file': <FileStorage: 'zhengchang.license' ('application/octet-stream')>} 2、 request.files.get("file") ...FileStorage: 'zhengchang.license' ('application/...
  • ...<el-upload action="" :limit="1" :on-change="handleChange" :auto-upload="false" :file-list="fileList" ...选择文件</span> </el-upload> 2、JavaScript export default { data
  • NULL 博文链接:https://maidoudao.iteye.com/blog/1511757
  • 这里演示的是前端获取JSON文件数据 选择文件 效果:拿到文件的JSON数据后,在代码编辑中显示 react引入antd的Upload组件 onImportExcel = (file) => { // 创建FileReader 对象读取 const reader ...
  • 但是因业务要求,经常对上传文件做限制要求,如只能上传jpg格式的图片,仅能上传xls的excel表格(xls和xlsx的内容读写java使用的是不同的jar包)。 这类需求可以通过ajax在后台进行处理,但是为了减少对系统的压力...
  • el-upload上传文件,显示上传进度

    千次阅读 2021-04-19 16:17:03
    el-upload上传文件,显示进度条 deviceFile.vue <el-upload class="upload-demo" ref="upload" action="donothing" :http-request="fileUpload" :multiple="true" :show-file-list="false" :file-list=...
  • el-upload 组件文件上传

    2022-04-03 21:50:24
    该组件可以实现文件上传, 组件内部会自己使用原生的xhr发送请求 <el-upload list-type="picture-card" :file-list="fileList" :on-remove="onRemove" :on-preview="onPreview" :on-change="onChange" :...
  • Httpservletrequest获取上传文件

    千次阅读 2021-04-12 14:52:29
    servlet3.0以上才能用 servlet3.0以上才能用 servlet3.0以上才能用 servlet3.0如果使用commons-fileupload...//获取上传文件对象 fileName = pohto.getSubmittedFileName();//获取上传文件的文件名 pohto.wr...
  • // 此处是压缩包中的test.txt文件,返回String类型(此时在回调的参数中已经可以获取上传的zip压缩包下的所有文件) . then ( function ( content ) { console . log ( content ) // 这个就是.txt...
  • elementui upload 上传文件详解

    万次阅读 多人点赞 2019-07-21 23:09:52
    各位同学,请希望看完,如果看了开头不看结尾, 代码错误请不要怪我。...说说今天在使用elemenui中 upload 组件的时候,一开始看有好多属性,然后我仔细看了,并总结了以下它的使用和常用属性的作用。 lim...
  • el-upload上传文件大小限制

    千次阅读 2021-08-11 10:12:52
    el-upload上传文件大小限制 当我们在使用element做上传文件的时候,会有要求做上传文件的大小限制这个需求,今天我们就来讲一下限制大小这个功能: 首先先讲一下流程,当文件超过20MB的时候让他提示文件大小不能超过...
  • 遇到一个问题,有多个el-upload,手动上传文件,最后一次性提交。但是后台要求提交的是binary的形式,请问有什么办法进行转换,转换又要针对el-upload的file中的哪个属性。 01 Bug 描述 笔者在使用 Vue + Element UI ...
  • 文件上传-获取上传文件路径

    千次阅读 2020-12-19 16:25:53
    #region 文件上传-获取上传文件路径public string FilePath(){DataTable dtStu = s1.select(" select * from Student_V where tblstudentid = " + studentID + "");string userName = "";if (dtStu.Rows.Count > ...
  • html代码: <el-upload id="audioUpload" class="avatar-uploader" :action="upLoadAudio" :show-file-list="true" :multiple="false" ...
  • 如标题,一般有这个需求,都是upload单选居多。关键点是choose里的那些函数。 我踩得坑就是单选情况下加了如图片obj.pushFile();加了这句话,会有调取多次上传服务的现象。 第一次上传调取一次服务,第二次调两...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 115,637
精华内容 46,254
关键字:

获取upload上传的文件内容

友情链接: CCS116944S.rar