精华内容
下载资源
问答
  • Vue上传文件

    千次阅读 2018-11-07 14:58:29
    Vue上传文件 上传效果 上传类型 这里的文件暂定义为:doc、docx、rar、zip、pdf、txt【这个可以自己定义,后台进行判断即可】 用到的框架及标签 框架element 标签el-upload 关键代码 上传标签代码   &...

    Vue上传文件

    上传效果

    上传类型

    • 这里的文件暂定义为:doc、docx、rar、zip、pdf、txt【这个可以自己定义,后台进行判断即可】

    用到的框架及标签

    • 框架element
    • 标签el-upload

    关键代码

    • 上传标签代码

       

      <el-upload
              class="avatar-uploader"
              action="/peng/addFile"
              :on-success="handleAvatarFileSuccess"
              :on-error="handleAvatarFileError"
              :before-upload="beforeAvatarFileUpload"
              limit="1">
          <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      
    • 对应的js方法代码

       

      handleAvatarFileError: function (err, file) {
          alert("文件上传走丢了。。");
      },
      handleAvatarFileSuccess: function (res, file) {
          this.$message.success("上传文件成功!");
      },
      beforeAvatarFileUpload: function (file) {
          //限制的上限为10M
          const isLt10M = file.size / 1024 / 1024 < 10;
      
          if (!isLt10M) {
              this.$message.error('上传文件大小不能超过 10MB!');
          }
          return isLt10M;
      }
      

    后台接收上传文件的代码

    • 关键部分

       

      @RequestMapping("/addFile")
      @ResponseBody
      public Result addFile(@RequestBody MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {
      
          Result res = new Result();
          String trueFileName = null;
      
          if (file != null) {
              String path = null;// 文件路径
              String fileType = null;//文件类型
              String fileName = file.getOriginalFilename();// 原文件名称
              // 判断图片类型
              fileType = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
              if (fileType != null) {
                  if ("DOC".equals(fileType.toUpperCase())
                          || "DOCX".equals(fileType.toUpperCase())
                          || "RAR".equals(fileType.toUpperCase())
                          || "ZIP".equals(fileType.toUpperCase())
                          || "PDF".equals(fileType.toUpperCase())
                          || "TXT".equals(fileType.toUpperCase())) {
                      String realPath = "/file" + File.separator;
                      //文件命名【随机24位+时间秒的后8位】【添加了后缀】
                      trueFileName = StringUtils.getRandomString(24) + "" + TimeUtils.getUnixTimeLast8() + "." + fileType;
                      // 设置文件存放的路径
                      path = realPath + trueFileName;
                      // 转存文件到指定路径
                      file.transferTo(new File(path));
                  } else {
                      res.setCode(ConfigData.CODE_PARAMETER_ERROR);
                      res.setMsg("上传的文件非DOC、DOCX、RAR、ZIP、PDF、TXT格式!");
                      return res;
                  }
              } else {
                  res.setCode(ConfigData.CODE_PARAMETER_ERROR);
                  res.setMsg("文件类型不正确!");
                  return res;
              }
          } else {
              res.setCode(ConfigData.CODE_PARAMETER_ERROR);
              res.setMsg("上传的文件为空!");
              return res;
          }
          Map<String, Object> obj = new HashMap<String, Object>();
          obj.put("fileName", trueFileName);
      
          res.setMsg("上传成功!");
          res.setObj(obj);
      
          return res;
      }
    展开全文
  • vue 上传文件

    2020-05-08 09:56:34
    1.创建上传文件标签 <input type="file" id="file" @change="changeFile()" ref="intFile" /> 考虑到vue要获取节点进行操作,所以给标签添加一个ref,方便获取属性并给标签添加事件 2.change事件 changeFile...

    1.创建上传文件标签

    <input type="file" id="file" @change="changeFile()" ref="intFile" />
    考虑到vue要获取节点进行操作,所以给标签添加一个ref,方便获取属性并给标签添加事件
    

    2.change事件

    changeFile(e){
    	var intFile = this.$refs.intFile;
    	this.files = intFile.files[0];
    	var size = this.files.size / 1024 / 1024 < 5;//计算文件的大小小于5mb
    	if(!size){//判断文件是否大于5mb
    		alert('上传文件大小不能超过5mb')
    		return
    	}
    	this.formData = new FormData();//new一个formData事件
    	this.formData.append("files",this.files); //将files属性添加到formData里
    	//formData就是我们要向后台传的参数了
    }
    

    3.上传文件

    axios.post(url, this.formData, config)
            .then(res => {
              console.log(res.data)
            })
    
    展开全文
  • vue上传文件

    2020-05-20 11:45:21
    html 选择需要文件上传 js // 上传文件 changeUploadCoverImg(event) { this.file = event.raw; this.ruleForm.excel = URL.createObjectURL(event.raw); }, upload(){ let formdata = new FormData(); formdata....

    html

    <el-form-item>
                <el-upload
                  ref="my-upload"
                  style="margin-left:-70px;"
                  class="upload-demo"
                  :auto-upload="false"
                  :on-change="changeUploadCoverImg"
                  :show-file-list="true"
                  accept=".xlsx, .xls"
                  :limit="1"
                  action
                >
                  <el-button size="small" type="primary" >选择需要文件上传</el-button>
                  <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
                </el-upload>
      </el-form-item>
    

    js

     // 上传文件
        changeUploadCoverImg(event) {
          this.file = event.raw;
          this.ruleForm.excel = URL.createObjectURL(event.raw);
        },
    
    upload(){
          let formdata = new FormData();
            formdata.append("File", this.file);
            formdata.append("crateTime", this.ruleForm.crateTime);
            formdata.append("paymentTime", this.ruleForm.paymentTime);
            formdata.append("lastUpdateTime", this.ruleForm.lastUpdateTime);
             this.$http({
                  url: this.$http.adornUrl(/aaaaaa'),
                  method: 'post',
                  data: this.$http.adornData(formdata, false, "formData")
                  }).then(({data}) => {
                    console.log(data,"222222")
                    })
           }         
    
    展开全文
  • vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要
  • VUE上传文件方法

    2020-04-17 14:14:30
    VUE上传文件方法
    //html部分
    <input type="file" id="people-export" ref="inputer" @change="fileUpload"/>
    
    //方法
    fileUpload(event){
          // 上传文件
          console.log(event);
          
          let file = event.target.files
          let formData = new FormData()
          formData.append('category', 'settingPic')
          formData.append('file', file[0])
          console.log(formData);
          // 文件上传
          this.$axios({
            method: "POST",
            url: url_g + '/dcas/event/'+this.contrastId+'/importathlete',
            data: formData
          }).then((res) => {
            let data = res.data
            if(data.success) {
              console.log(data);
              
              
            } else {
              this.$message.error(data.message || '操作失败')
            }
            this.uploadLoading = false
          }).catch((e)=>{
            this.uploadLoading = false
            alert(e)
          })
          
        },
    
    展开全文
  • vue上传文件组件 vue的简单文件上传组件 (A simple file upload component for vue) A file upload component for vuejs. vuejs的文件上传组件。 现场演示 (Live demo) ...
  • vue上传文件组件 用于文件上传的Vue组件 (A Vue component for file uploads) A Vue.js component for Dropzone.js - a drag’n’drop file uploads utility with image previews. Dropzone.js的Vue.js组件-具有...
  • vue上传文件组件A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars. Vue.js的简单文件上传组件。 发出XHR Upload Progress的事件以获取良好的进度条。 Vue...
  • Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码: html: <input type="f...
  • vue上传文件遇到的坑

    2020-12-17 17:49:33
    vue上传文件遇到的坑请求头加了超时时间为1000,导致上传错误 请求头加了超时时间为1000,导致上传错误
  • view+vue上传文件

    2020-07-09 17:20:13
    view+vue上传文件 <Upload ref= "upload" align="left" name= "file" :data="setValidates" action= '/mysens/sensitiveInformat/ionScan' :format="['xlsx']" :before-upload="handleUpload" :on-success...
  • vue.js,vue-loader上传文件vue-file-upload代码里面包含demo,运行: yarn install && yarn start 安装 npm npm install --save vue-file-upload 普通JS var VueFileUpload = require ( 'vue-file-upload' ) ;...
  • VUE与Struts2传输文件|VUE上传文件到Struts2 问题起因 公司有一个老Web项目,是很久以前用Struts2开发的,现在要将这个Web项目开发一个微信端,所以微信项目前端使用了Vue,而后端依旧使用以前的Struts2接口代码。 ...
  • 根据文件识别头信息获取图片文件的类型: JPG: 文件头标识: FF D8 文件尾标识: FF D9 ...vue上传文件判断文件格式 GIF JPG PNG: <template> <div> <div ref="drag" id='drag' @drop=
  • vue里一般上传文件会用到一些组件,本次使用的是el-upload,这里只是介绍一种思路, 其他的组件类似,有碰到类似问题的,欢迎探讨。 前端小白,涉及到的代码可能会有点粗糙,欢迎来喷。一开始在demo的时候,直接用的...
  • VUE上传文件到阿里云OSS 时间:2021-01-08 版本:ali-oss ^6.11.2 安装 推荐安装,因为使用npm安装,所以此教程理论上和node.js后端的使用方式是通用的。 npm install ali-oss --save yarn add ali-oss 初始化 let...
  • 将搜索的nginx日志文件拖到此处,或点击上传 golang代码: func UploadHandler(w http.ResponseWriter, r *http.Request) GetFile(w, r, ../test.dat) } func GetFile(w http.ResponseWriter, r *...
  • Vue上传文件/图片到七牛云

    千次阅读 2018-10-04 10:15:03
    目的:使用 vue 上传文件/图片 到七牛云 说明: 1、前台使用vue,后台用 java 传递一个 token。 2、token : 这个相当于一个密钥。 3、简单点说。就不写什么去注册账号,找到 as he ks 啥的,都到这一步,...
  • vue里一般上传文件会用到一些组件,本次使用的是el-upload,这里只是介绍一种思路, 其他的组件类似,有碰到类似问题的,欢饮探讨。前端小白,设计到的代码可能会有点粗糙,欢迎来喷。一开始在demo的时候,直接用的...
  • vue上传文件组件

    千次阅读 2019-04-23 19:33:10
    来源: http://www.jq22.com/jquery-info15578 ...github: https://github.com/317482454/vue_upload/blob/master/src/components/Hello.vue 来看我修改: 代码: 父组件: 如何把上传的图片传给后台 https://...
  • web页面采用VUE写的一个上传文件的组件,利用了html5的特性, 一、Html5是可以批量选择本地文件的 二、html5也可以选择文件夹进行上传的。 三、html5还可以把大文件切版上传。 四、html5支持拖拽文件 vue-...
  • <template> <el-form :model="form"> <el-form-item label="上传文件" :label-width="formLabelWidth"> <el-upload ref="uploadExcel" action="https://jsonplacehol...
  • Spring Boot + Vue上传文件并附带头信息的方法 使用Element组件: 前端代码: <div style="display: flex;justify-content: flex-end"> <el-upload class="upload-demo" action="/api/filesystem/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,050
精华内容 2,420
关键字:

vue上传文件

vue 订阅