精华内容
下载资源
问答
  • vue 文件上传 带格式、类型、大小、进度展示
  • 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文件上传成功后清空文件

    千次阅读 2020-08-28 16:07:44
    在项目中我们使用input标签设置type属性为file,上传文件后需要清空选中的文件, <input type="file" ref="clearFile" name="file" id="file"> <button @click="clearFile"></button> <...

    在项目中我们使用input标签设置type属性为file,上传文件后需要清空选中的文件,

    <input type="file" ref="clearFile"  name="file" id="file">
    <button @click="clearFile"></button>
    
    <script>
    methods:{
        clearFile() {
    	this.$refs.clearFile.value = ''; // 清空file文件
    }
    }
    </script>

     

    展开全文
  • antd vue 文件上传实例

    千次阅读 2020-03-16 17:47:06
    antd vue 文件上传实例 说明 该实例是后端进行文件上传至minio服务器 这里仅仅是展示前端antd vue得代码 限制文件类型配置查看 这里 <template> <a-upload :headers="headers" :action="url" :...

    antd vue 文件上传实例

    说明

    该实例是后端进行文件上传至minio服务器
    这里仅仅是展示前端antd vue得代码

    限制文件类型配置查看
    这里

    <template>
      <a-upload
        :headers="headers"
        :action="url"
        :fileList="fileList"
        @change="handleChange"
        :beforeUpload="beforeUpload"
      >
        <a-button :disabled="isShow"> <a-icon type="upload" /> Upload </a-button>
      </a-upload>
    </template>
    <script>
    import { mapGetters } from 'vuex'
    export default {
      name: 'MinioUplode',
      // 此处接收仅仅针对有有父组件得情况,如果直接使用a-upload则不需要
      props: {
        url: {
          type: String,
          default: 'api/storage/upload'
        },
        fileListTemp: {
          type: Array,
          default: () => []
        },
        isShow: {
          type: Boolean,
          default: false
        }
      },
      data () {
        return {
          fileList: this.fileListTemp,
          // 请求头里要携带token用来识别身份
          headers: {
            'Authorization': 'Bearer' + this.token()
          }
        }
      },
      methods: {
        ...mapGetters(['token']),
        // 此方法主要用来处理回显列表,以及去除没有实际上传得文件
        // 图片一旦长传在file中会有status字段,如果没有则没有实际上传
        // status有四种状态  'uploading' 'done' 'error' 'removed'
        handleChange (info) {
          let fileList = [...info.fileList]
          // 这里用来处理,页面中展示已经上传得个数
          // .slice(),括号里是负数是从尾部开始截取 限制最长15
          fileList = fileList.slice(-15)
          // 此处去除fileList中status为undefined得对象
          // 注意此处不是null!!!!
          fileList = fileList.filter(item => item.status !== undefined)
          // 从后端得回调 response 中获取url,并复制给fileList对象得url
          // 作用,有了url 前端才可以下载查看
          fileList = fileList.map(file => {
            if (file.response) {
              // 获取回调url
              file.url = file.response.data.url
            }
            return file
          })
          this.fileList = fileList
        },
        beforeUpload (file) {
          // 此处针对修改操作时,如果之前没有数据this.fileList时null 进行...this.fileList会报错
          // 错误类型: Invalid attempt to spread non-iterable instance
          if (this.fileList === null) {
            this.fileList = []
          }
          const list = [...this.fileList]
          // 限制最多只能穿15个文件
          const listLength = list.length > 14
          console.log(list.length, 'list.length')
          if (listLength) {
            this.$message.warning('最多上传15个文件')
          }
          // 限制单个文件的大小不大于100MB
          const size = file.size / 1024 / 1024 > 100
          if (size) {
            this.$message.warning('上传文件不能大于100MB')
          }
          // 返回时注意,此处要把所有得标识flag全部返回并且使用&
          // 原因:有一个条件不满足,就不能进行文件上传
          return !size && !listLength
        }
      },
      // 此处监听仅仅针对有有父组件得情况,如果直接使用a-upload则不需要
      watch: {
        fileList (val) {
          this.fileList = val
          // 向父组件更新
          this.$emit('updateFileList', val)
        },
        fileListTemp (val) {
          this.fileList = val
        }
      }
    }
    </script>
    <style scoped>
    </style>
    
    展开全文
  • 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

    input[type=“file”]上传文件原理详解https://blog.csdn.net/weixin_42193004/article/details/96275626

    formData:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

    结果:
    在这里插入图片描述

    代码:

    <div>
                      <span>上传文件:</span>
                      <a class="upload" id="up_btn">
                        <input type="file" @change="uploadFile()" class="change" id="file1" />
                        选择文件
                      </a>
    
                      <a
                        :href="this.config.hostfile + file1.FilePath"
                        :download="file1.SysFileName"
                        target="_blank"
                        class="file2"
                      >{{file1.OriginName}}</a>
                    </div>
    
    
    import axios from "axios";
    data() {
        return {
          file1: {
            name: "",
            url: "",
            download: "",
          }
          }
          }
    methods:{
     uploadFile() {
          let f = document.getElementById("file1");
          if (f.files) {
            let fileList = f.files;
            let formData = new FormData();  //创建空对象
            for (let i = 0; i < fileList.length; i++) {
              //如需判断文件就在这判断 现在不判断
              formData.append("film", fileList[i]);
            }
            axios
              .post(文件上传接口, formData)
              .then((res) => {
                if (res.data.Success) {
                  this.file1 = res.data.Result;
                } else {
                  this.$message.error(res.Msg || "获取数据失败,无法上传");
                }
              })
              .catch((err) => {
                console.log(err);
                this.$message.error("无法上传");
              });
          }
        }
    }
    
    .upload {
      padding: 4px 10px;
      height: 20px;
      background-color: #00b3ee;
      color: #fff;
      position: relative;
    }
    .change {
      position: absolute;
      top: 0;
      left: 0px;
      overflow: hidden;
      opacity: 0;
      width: 76px;
      height: 24px;
    }
    .file2{
      padding-left: 10px;
    }
    
    展开全文
  • 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
  • vue实现文件上传功能

    2021-01-19 17:22:17
    vue 文件上传,供大家参考,具体内容如下 首先 先说一下想要实现的效果 就如截图所见,需要将企业和需要上传的文件提交到后台处理,那么接下来就说如何实现 vue 实现 vue 页面代码 ref=upload action=...
  • Vue实现文件上传和文件下载

    万次阅读 多人点赞 2018-08-22 22:09:55
    文件下载: 文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端的接口只给了一个API请求: 前端第一个...
  • vue+elementui 上传文件时限制上传文件的类型和大小 重点属性–:before-upload="beforeAvatarUpload" html代码: <el-upload class="upload-demo" ref="upload1" :action="baseUrl+'/module/v1/manage/'" :...
  • vue文件上传文档

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

    千次阅读 2018-11-07 14:58:29
    Vue上传文件 上传效果 上传类型 这里的文件暂定义为:doc、docx、rar、zip、pdf、txt【这个可以自己定义,后台进行判断即可】 用到的框架及标签 框架element 标签el-upload 关键代码 上传标签代码   &...
  • 一、excel文件上传 1、html代码: <el-button size="mini" :plain="true" class="file-box" type="button"> 导入 <input id="up" ref="file" type="file" class="file-btn" @change="inputCustomProd...
  • 如上图,展示出来的效果。 首先先说富文本编辑器的引入和图片上传 富文本start----------------------- ...安装富文本编辑器图片上传插件quill-editor-upload npm install vue-quill-editor-upload -...
  • Vue使用formData类型上传文件

    千次阅读 2021-09-01 09:43:11
    其中,文件上传算是比较难的一种。这篇文章五分钟教会你上传文件。 1.如图片上传,后端需要前端传formData类型数据的情况下 <el-button type="primary" v-if="imgUrl2 ==''" @click="uploadFile2()">点击上传...
  • vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要
  • 问题描述 关于elementUI文件上传校验功能实现 代码 <el-upload accept="image/jpeg,image/gif,image/png" class="upload-demo upload-tip" :action="upload...
  • vue文件上传(单文件以及多文件)

    千次阅读 2019-04-20 14:05:20
    但是element和其他的组件都是图片单次上传,而且比较麻烦,样式和方法写起来都太乱了,基本上上传文件还是自己写的最舒服。文件分为单文件和多文件上传 1 单文件 我用的是Element,所以我会借用element的样式和其他...
  • Vue文件代理每个文件都应该得到同等对待高性能Vue文件上传组件,每个Vue文件代理应具有优雅而独特的预览高性能Vue文件上传组件,对于每种文件类型和支持均具有优雅而独特的预览用于拖放,验证,具有进度支持的默认...
  • springboot整合vue实现上传下载文件

    万次阅读 多人点赞 2019-05-06 18:46:43
    springboot整合vue实现上传下载文件 文章目录springboot整合vue实现上传下载文件1上传下载文件api文件2.上传文件配置3.vue前端主要部分 环境 springboot 1.5.x 完整代码下载: springboot整合vue实现上传下 1...
  • 本篇文章主要介绍了vue webuploader 文件上传组件开发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下 一、文件上传(基于axios的简单上传) 所使用的技术:axios、springboot、vue; 实现思路:通过h5 :input元素标签进行...
  • vue上传文件相同文件问题

    千次阅读 2018-03-13 16:30:30
    vue项目中会遇到上传文件的需求,jquery会有...这里文件上传文件框的样式美化就不过多赘述了,有很多例子。只介绍一下功能的实现以及注意的问题。 &lt;template&gt; &lt;div&gt; &lt;span...
  • vue 文件上传判断文件尺寸级大小

    千次阅读 2018-08-01 15:04:00
    一、vue 基于elementui实现文件或图片上传判断文件或图片的尺寸;本例基于图片上传的demo <el-form-item label="添加图片"> <div class="imgList"> <div class="imgBox" :cl...
  • iview 文件上传 .vue

    2021-01-08 11:10:16
    iview 文件上传 .vue
  • 主要介绍了node+vue实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现文件上传

    万次阅读 2019-07-21 20:38:01
    转自:https://blog.csdn.net/hzschqh/article/details/79713889
  • 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 文件上传方法formData

    千次阅读 2020-10-13 17:31:26
    html: 将文件拖到此处,或点击上传 只能上传xls文件,请下载模板填写 导入 formData方法 // 导入客户接口 uploadCust() { this.loading = true const formData = new FormData() formData.append('upload', this....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,784
精华内容 17,113
关键字:

vue文件上传时的文件类型

vue 订阅