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

    千次阅读 2018-08-11 18:20:40
    vue 文件上传 首先 先说一下想要实现的效果 就如截图所见,需要将企业和需要上传的文件提交到后台处理,那么接下来就说如何实现 vue 实现 vue 页面代码 <el-upload class="upload-...

    vue 文件上传

    • 首先 先说一下想要实现的效果
      这里写图片描述
      就如截图所见,需要将企业和需要上传的文件提交到后台处理,那么接下来就说如何实现

    • vue 实现
      vue 页面代码

      <el-upload
            class="upload-demo"
            ref="upload"
            action="doUpload"
            :limit="1"
            :file-list="fileList"
            :before-upload="beforeUpload">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <a href="./static/moban.xlsx" download="模板"><el-button size="small" type="success">下载模板</el-button></a>
            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
            <div slot="tip" class="el-upload__tip">只能上传excel文件,且不超过5MB</div>
            <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div>
      </el-upload> 
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="submitUpload()">确定</el-button>
        </span>
     data () {
          return {
            files:"",
            fileName: '',
            fileList: []
          }
        },

    上传之前的大小校验

    beforeUpload(file){
            debugger
            console.log(file,'文件');
            this.files = file;
            const extension = file.name.split('.')[1] === 'xls'
            const extension2 = file.name.split('.')[1] === 'xlsx'
            const isLt2M = file.size / 1024 / 1024 < 5
            if (!extension && !extension2) {
              this.$message.warning('上传模板只能是 xls、xlsx格式!')
              return
            }
            if (!isLt2M) {
              this.$message.warning('上传模板大小不能超过 5MB!')
              return
            }
            this.fileName = file.name;
            return false // 返回false不会自动上传
          },

    手动上传确认提交

    submitUpload() {
            debugger
            console.log('上传'+this.files.name)
            if(this.fileName == ""){
              this.$message.warning('请选择要上传的文件!')
              return false
            }
            let fileFormData = new FormData();
            fileFormData.append('file', this.files, this.fileName);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名
            let requestConfig = {
              headers: {
                'Content-Type': 'multipart/form-data'
              },
            }
            this.$http.post(`/basedata/oesmembers/upload?companyId=`+this.company, fileFormData, requestConfig).then((res) => {
                debugger
                if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })  
          }
    • 后台
        /**
         * 上传文件
         */
        @PostMapping("/upload")
        @RequiresPermissions("basedata:oesmembers:upload")
        public R upload(@RequestParam("file") MultipartFile file, @RequestParam("companyId") Integer companyId) {
            System.out.println(companyId);
            if (file.isEmpty()) {
                throw new RRException("上传文件不能为空");
            }
            //上传文件 相关逻辑
    
            return R.ok();
        }
    展开全文
  • VUE文件上传

    万次阅读 2018-01-19 13:07:05
    v-show="fileupView" id="fileSelect" name="fileSelect" @change="update" ref="inputer" type="file"/> label="文件打开" class="demo-raised-button" @click="fileopen" primary> ...label="文件上传" class="de

    HTML:

    <input v-show="fileupView" id="fileSelect" name="fileSelect" @change="update" ref="inputer"  type="file"/>
    <mu-raised-button label="文件打开" class="demo-raised-button" @click="fileopen" primary></mu-raised-button>
    
    <mu-raised-button label="文件上传" class="demo-raised-button" @click="fileupdate" primary></mu-raised-button>

    将原始的控件input设置成影藏v-show显示。


    VUE:


    //原生按钮的属性获取(可优化至新按钮事件去)
    update: function () {
        let inputDOM = this.$refs.inputer;
        // 通过DOM取文件数据
        this.file    = inputDOM.files[0];
        console.log("inputDOM.files[0]:"+inputDOM.files[0]);
        if(inputDOM.files[0] === undefined){
            this.fileName = '';
            this.fileSize = '';
            this.fileType = '';
        }
        else{
            this.fileName = this.file.name;
            //kb
            if(this.file.size/1024<1000){
                this.fileSize = (this.file.size/1024).toFixed(2) +"kb";
            }
            else if(this.file.size/1024>1000){
                this.fileSize = ((this.file.size/1024)/1024).toFixed(2) +"MB";
            }
            this.fileType = this.file.type;
        }
    },
    //用新button按钮去替换原始的控件
    fileopen:function () {
        var fileSelect = document.getElementById("fileSelect");
        fileSelect.click();
    },
    
    
    //上传按钮的事件axios
    fileupdate:function () {
        let inputDOM = this.$refs.inputer;
        // 通过DOM取文件数据
        this.file    = inputDOM.files[0];
        var formdata = new FormData();
        formdata.append('fileSelect',inputDOM.files[0]);
    
        axios({
            url: 'update',
            method: 'post',
            data: formdata,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function (re) {
            console.log(re);
            })
            .catch(function (err) {
                console.log(err);
            })
    },

    展开全文
  • vue文件上传

    2020-06-16 14:03:56
  • vue 文件上传 带格式、类型、大小、进度展示
  • 插件描述:vue文件上传插件,可配置更新时间:2020-12-23 10:17:131、本插件基于vue+element,使用前请先使用npm install安装相关依赖2、运行项目 npm run serve3、打包项目 npm run build4、dist文件夹内为打包后的...

    867deefc89e0d1e980f7a359f65e026b.png

    ff20617b0252a94a2598425ec9f64fdc.png

    插件描述:vue文件上传插件,可配置

    更新时间:2020-12-23 10:17:13

    1、本插件基于vue+element,使用前请先使用npm install安装相关依赖

    2、运行项目 npm run serve

    3、打包项目 npm run build

    4、dist文件夹内为打包后的文件

    5、src内components组件为组件的源码

    6、因为是本地项目,因此不支持预览,但可在本插件基础上进行修改

    7、element主要利用样式和相关便利组件,可自行修改

    8、上传相同文件不会对数据产生变化

    9、src内views内的index.vue已经引入组件,并有相关设置{

    fileType: "file", //image为图片,file为所有文件

    isMultiple: true, //是否可以多选

    isClear: false, //每次上传是否需要清空已选择的文件

    fileData: [], //每次选择文件后会更新该数据

    }

    10、本插件支持IE10+

    展开全文
  • vue 文件上传插件 上载器 (v-uploader) A Vue2 plugin to make files upload simple and easier, you can drag files or select file in dialog to upload. 一个Vue2插件可以使文件上传变得简单而轻松,您可以拖动...
  • antd vue 文件上传实例

    千次阅读 2020-03-16 17:47:06
    antd vue 文件上传实例 说明 该实例是后端进行文件上传至minio服务器 这里仅仅是展示前端antd vue得代码 限制文件类型配置查看 这里 <template> <a-upload :headers="headers" :action="url" :...
  • vue文件上传功能bootstarp框架 封装公共组件components/fileupload/FileUpload.vue 内容如下: 公共组件 ```html <template> <div component_name="FileUpload" :component_id="id"> <div class=...
  • 基于SpringBoot vue 文件上传功能实现 1、实现vue文件上传必须给对应的文件绑定vue的ref <td valign="middle" align="right" > photo: </td> <td valign="middle" align="left"> <input ...
  • 今天写一个文件上传的功能,开始想用element-ui的组件写,但是发现不知道怎么把文件标题和内容一起上传,所以用了经典的input框上传。废话不多说,直接上代码。这是表单:点击上传按钮提交请求:var formData = new ...
  • vue文件上传组件 upload ,拥有支持多种格式文件上传,单文件多文件等都支持,许多项目现在都少不了文件上传功能,但是vue 的upload组件如果直接引用,肯定也有一些不方便之处,有的时候需要传参数,需要手动触发...
  • vue文件上传组件 upload ,拥有支持多种格式文件上传,单文件多文件等都支持,许多项目现在都少不了文件上传功能,但是vue 的upload组件如果直接引用,肯定也有一些不方便之处,有的时候需要传参数,需要手动触发...
  • 问题描述我后端用springboot做的前端用的antd-design-vue上传文件,通过多次尝试都以失败告终,不知道问题怎么解决,请高手高手思路,谢谢。。。。问题出现的环境背景及自己尝试过哪些方法目前出现的错误是415 ...
  • SpringMVC+Vue文件上传

    2020-11-10 16:33:26
    SpringMVC+vue实现文件上传后台前端 异步上传(后端springmvc加前端vue) 后台 采用springmvc,实现获取到相对路径和绝对路径存储为json传到前端作为新增到数据库里的数据 //文件上传 @PostMapping(value = "/...
  • vue文件上传文档

    万次阅读 2020-02-22 15:47:55
    //上传文件,成功,失败调用的方法 changeFlies(file, fileList){   var  self  =  this ;  self . uploadFileStatus  =  true ;   let  existFile  =  fileList . slice ( 0 , ...
  • vue文件上传下载

    2020-12-17 15:35:18
    下载文件流 let headers = res.data.headers; let blob = new Blob([res.data.body], { type: ["content-type"], }); let link = document.createElement("a"); link.href = window.URL.createObjectURL(blob)...
  • ant-design-pro-vue 文件上传 upLoad 组件的一些使用经验 因为工作中需要使用文件上传功能上传附件,公司的后台使用 ant-design-pro + vue 作为前端开发技术栈,因此使用了 ant-design-pro-vue 里面的 upLoad 组件来...
  • 问题描述我后端用springboot做的前端用的antd-design-vue上传文件,通过多次尝试都以失败告终,不知道问题怎么解决,请高手高手思路,谢谢。。。。问题出现的环境背景及自己尝试过哪些方法目前出现的错误是415 ...
  • vue 文件上传及预览

    万次阅读 2018-08-03 11:50:08
    &lt;template&gt; &lt;div id="file"&gt; &lt;input name="files" id="uploaderInput" type="file" accept="images/*"...
  • vue文件上传(单文件以及多文件)

    千次阅读 2019-04-20 14:05:20
    文件分为单文件和多文件上传 1 单文件 我用的是Element,所以我会借用element的样式和其他表单或者输入框统一。 这里是的上传input输入框,我用绝对定位将其放在后面的input 显示框的上面,后面的正常在...
  • vue文件上传控件

    2018-10-24 13:39:00
    下载地址:... 使用方式: <upload ref='upload' action-url='' :multiple='true'></upload>...action-url//文件保存地址 multiple//是否多个文件 在用户点击确定按钮的方法里执行...
  • vue文件上传与显示

    2020-09-11 17:17:51
    input[type=“file”]上传文件原理详解https://blog.csdn.net/weixin_42193004/article/details/96275626 ...上传文件:</span> <a class="upload" id="up_btn"> <input type="file

空空如也

空空如也

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

vue文件上传

vue 订阅