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

    2021-01-15 22:59:03
    插件描述: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+

    展开全文
  • 需求:点击上传附件 上传同时就要验证是否为doc文件 同理 可验证xls,md,html等文件 <el-form-item label="附件:" v-show="taskfileshow" prop="file"> <el-button type="primary" plain @click=...

    需求:点击上传附件  上传同时就要验证是否为doc文件 

    同理 可验证xls,md,html等文件

     

        <el-form-item label="附件:" v-show="taskfileshow" prop="file"> 
                    <el-button type="primary"  plain @click="clickupload()"  :disabled="updateinfo">上传附件</el-button>
                    <input type="file" name="" class="btnUploadID"  @change="changeuploaID($event)" ref="fileRef" style="display:none" id="input-file-ID" v-if="clearShow"  >
                    <label   class="lbfilename"  :title="information.fileName">{{information.fileName}}</label>
         </el-form-item>

     

                checkFile:function(name){ 
                    var reg = /^.*\.(?:doc)$/i;//文件名可以带空格
                    if (!reg.test(name)) {//校验不通过
                        this.$message({
                            message:'請上傳doc格式的文件!',
                            type: 'error'
                        });
                        return false;
                    }else{
                        return true;
                    }
                },

              clickupload(){ 
                    document.querySelector('.btnUploadID').click();
                },
                changeuploaID(e){   
                    this.deviceArray = [];
                    let deviceFile = e.target.files;   
                    for(let i=0;i<deviceFile.length;i++){
                        if (this.checkFile(deviceFile[i].name)) {
                            this.information.fileNamelist.push(deviceFile[i].name);
                            this.information.fileName = deviceFile[i].name;
                            this.information.file =  deviceFile[i]; 
                        } else {
                            this.$refs.fileRef.value = ''
                        }

                          
                    }  
                }, 

    下面为验证xls

     

    展开全文
  • vue中文件上传及接收

    千次阅读 2021-02-11 15:19:48
    准备:前端:vue环境+axios+elemen-ui后端:node.js multer前端代码:// 引入axiosimport axios from 'axios';// 获取用户信息getUserInfo() {// 发送请求 获取用户信息getInfo().then(res => {// 接收数据let { data...

    准备:

    前端:vue环境+axios+elemen-ui

    后端:node.js multer

    前端代码:

    // 引入axios

    import axios from 'axios';

    // 获取用户信息

    getUserInfo() {

    // 发送请求 获取用户信息

    getInfo()

    .then(res => {

    // 接收数据

    let { data } = res;

    this.userInfo = data[0] // 渲染

    })

    .catch(err => {

    console.log(err)

    })

    },

    // 头像上传成功

    handleAvatarSuccess(res, file) {

    this.imageUrl = URL.createObjectURL(file.raw);

    },

    // 头上上传之前限制

    beforeAvatarUpload(file) {

    const isJPG = file.type === 'image/jpeg';

    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {

    this.$message.error('上传头像图片只能是 JPG 格式!');

    }

    if (!isLt2M) {

    this.$message.error('上传头像图片大小不能超过 2MB!');

    }

    return isJPG && isLt2M;

    },

    // 上传函数

    uploadAvatar(file) {

    // 创建formData实例对象

    let formData = new FormData();

    // 把文件信息添加进如对象

    formData.append('file', file.file)

    // 发送文件信息给后端

    axios.post('/account/uploadavatar', formData)

    .then(response => {

    // 获取地址

    let { avatarUrl } = response.data;

    // 回填

    this.imageUrl = 'http://127.0.0.1:666' + avatarUrl;

    // 传递给父组件

    this.$emit('自定义事件')

    })

    .catch(err => {

    console.log(err)

    })

    }

    后端:

    // 引入node上传模块

    var multer = require('multer');

    // 配置存储路径 和 重命名

    var storage = multer.diskStorage({

    // 图片上传到服务器以后 要放置的路径

    destination: 'public/upload',

    // 图片重命名

    filename: function (req, file, cb) {

    var fileFormat =(file.originalname).split(".");

    // 获取时间戳

    var filename = new Date().getTime();

    // 124354654 + "." + jpg

    cb(null, filename + "." + fileFormat[fileFormat.length - 1]);

    }

    });

    // 上传对象

    var upload = multer({

    storage,

    });

    // 接收上传请求

    router.post('/uploadavatar', upload.single('file'), (req, res) => {

    // 接收到的文件信息

    var file = req.file;

    console.log(file)

    // 文件名

    let fileName = file.filename;

    // 拼接文件路径

    let avatarUrl = '/upload/' + fileName

    // 构造sql

    const sqlStr = `update accounts set avatarUrl = '${avatarUrl}' where id=${req.user.id}`;

    // 执行sql

    connection.query(sqlStr, (err, data) => {

    if (err) throw err;

    if (data.affectedRows > 0) {

    res.send({code: 0, reason: "上传成功", avatarUrl})

    } else {

    res.send({code: 1, reason: "上传失败"})

    }

    })

    })

    展开全文
  • vue 批量上传文件

    千次阅读 2021-01-11 17:21:50
    1.前端vue统一处理多个文件保存到formData对象,请求后台接口 2.后台接口使用HttpServletRequest 进行接收,可转化成MultipartHttpServletRequest对象接收前端formData对象 //前端使用的UI组件是Ant Design of ...

    业务背景:一次性批量上传多个文件,只请求一次接口,则手动提交到后台

    简单说明一个实现思路:

    1. 前端vue统一处理多个文件保存到formData对象中,请求后台接口
    2. 后台接口使用HttpServletRequest 进行接收,可转化成MultipartHttpServletRequest对象接收前端formData对象
    //前端使用的UI组件是Ant Design of Vue的upload组件
    <template>
      <div class="clearfix">
        <a-upload
          :multiple="true"
          :before-upload="beforeUpload"
          :list-type="listType"
          :file-list="fileList"
          @preview="handlePreview"
          @change="handleChange"
          @download="handleDownload"
        >
          <div v-if="isMore">
            <a-icon type="plus" />
            <div class="ant-upload-text">文件上传</div>
          </div>
          <div v-if="!isMore && fileList.length < 1">
            <a-icon type="plus" />
            <div class="ant-upload-text">文件上传</div>
          </div>
        </a-upload>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </div>
    </template>
    
    
    JS的核心代码:
    handleUpload() {
          const { fileList } = this
          if (fileList.length > 0) {
            var notUploaded = []
            var uploaded = []
            fileList.forEach((item) => {
              if (item.status && item.status === 'done') {
                uploaded.push(item.url)
              } else {
                notUploaded.push(item)
              }
            })
            let formData = new FormData()
            notUploaded.forEach((file, index) => {
              //所有文件保存在formData中
              formData.append(`file${index}`, file.originFileObj)
            })
            console.log('formData', JSON.stringify(formData))
            //请求批量上传接口
            batchUploadFile(formData, this.targetS).then((res) => {
              if (res.success) {
                console.log('res', JSON.stringify(res))
              } else {
                this.$message.error('图片上传失败,请重新上传')
              }
            })
            // return
            //this.$emit('loadImgUrl', this.loadImgUrl.join(','))
            //this.fileList = []
          } else {
            // 如果没有图片则返回空
            //this.$emit('loadImgUrl', '')
            //this.fileList = []
          }
        },
    
    后台代码:
    
        @ApiOperation(value = "批量文件上传(最多同时上传5个文件)", notes = "批量文件上传")
        @PostMapping("/batchUploadFile/{filePath}")
        public Result<?> batchUploadFile(@ApiParam(value = "自定义上传文件的路径")
                                         @PathVariable("filePath") String filePath,
                                         HttpServletRequest request) throws Exception {
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
            if (fileMap.isEmpty()) {
                return Result.error("上传文件不能为空");
            }
            if (fileMap.size() > 5) {
                return Result.error("批量上传文件数量不能超过5个文件");
            }
            List<Map<String, Object>> mapList = ftpUtils.batchUploadFile(fileMap, filePath);
            return Result.OK(mapList);
        }
    

    注意:以上代码部分功能不完全只能作为参考,重点是实现思路
    1.前端是如何组装参数

      let formData = new FormData()
            notUploaded.forEach((file, index) => {
              //所有文件保存在formData中
              formData.append(`file${index}`, file.originFileObj) //核心代码
            })
    

    2.后台使用MultipartHttpServletRequest对象进行接受

      MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
    

    前端参数格式:
    在这里插入图片描述

    在这里插入图片描述

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

    展开全文
  • isXlS) { this.$message.error("仅支持xls、xlsx格式的文件!"); } // if (!isLt2M) { // this.$message.error("上传头像图片大小不能超过 2MB!"); // } this.filename = file.name; return isXlS; },
  • Vue中实现上传下载文件操作

    千次阅读 2020-12-29 05:20:45
    Vue中实现上传下载文件操作1、上传操作利用Element实现上传组件,注意这块由于是独立于axios之外的请求,需要独立配置请求头,Element的Upload还需要将with-credentials设置为true这样上传文件的时候才会带上...
  • vue实时上传文件进度条 //上传文件组件 <el-upload action :show-file-list="false" :before-upload="uploadFile" > <el-button type="primary" :disabled="progressFlag">上传数据</el-button&...
  • Vue使用formData类型上传文件

    千次阅读 2021-09-01 09:43:11
    其中,文件上传算是比较难的一种。这篇文章五分钟教会你上传文件。 1.如图片上传,后端需要前端传formData类型数据的情况下 <el-button type="primary" v-if="imgUrl2 ==''" @click="uploadFile2()">点击上传...
  • vue里面要实现多文件上传功能,还是很方便的。 本文就一起来学习一下,如何把多文件上传功能封装成一个组件,后面需要使用的时候,直接两三行代码就能搞定。 1、前端代码 首先我们先看前端,如何把它封装成一个...
  • ref="ruleForm":model="formDataAll":rules="rules":label-col="labelCol":wrapper-col="wrapperCol">v-model="formDataAll.name"@blur="()=>{$refs.name.onFieldBlur();}"/>上海北京v-model="formDataAll....
  • ", "警告", { confirmButtonText: "确定", cancelButtonText: "取消", }).then(() => { //判断当前文件状态是否 在上传中, if (this.contentList[index].status == 'uploading') { //是新增上传,或是更换上传处理...
  • var fd = newFormData();fd.append(‘image‘, that.$refs.upload.files[0]);fd.append(‘filename‘, that.formData.images);fd.append("system_type", that.formData.systemTypeVal);fd.append("name", that....
  • vue上传文本文件后读取文本文件中的内容 使用场景:当需要上传文件时,我们前端需要读取出上传文件中的内容,然后处理成一个json列表的格式,传给后端。 文本文件都可以读取(可以用.txt打开的文件),如 .excel,...
  • vue上传文件到Minio

    千次阅读 2021-04-06 16:40:43
    文件 file-uploader.js var Minio = require('minio'); let s3 = new Minio.Client({ endPoint: '192.168.xxx.xxx', port: 9000, useSSL: false, accessKey: 'xxxx', secretKey: 'xxxx', Region:'xxxxxx', }...
  • 简单的上传文件,先把文件上传到input框只展示文件名,不走接口,之后点击确定上传按钮统一上传 <template> <div> <Col> <FormItem label="上传文件:" prop="plugin_name"> <...
  • vue form表单上传文件

    2021-02-27 09:01:33
    data: {name: '',age: '',file: ''},methods: {getFile(event) {this.file = event.target.files[0];console.log(this.file);},submitForm(event) {event.preventDefault();let formData = new FormData();...
  • vue 文件拖拽上传

    2020-12-30 11:08:06
    file) return if (file.size > this.MAX_FILE_SIZE) { return alert('文件大小不能超过10M') } this.batchFile = file this.fileName = file.name // 清空,防止上传后再上传没有反应 e.target.value = '' }, // ...
  • vue+上传文件夹

    千次阅读 2020-12-19 16:25:17
    在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到这次公司要做文件及文件夹上传的需求,文件上传之前使用的是ElementUi封装好的组件一步到位如果感兴趣可以去看下,等到文件夹上传,则有些惆怅了。...
  • ant-design vue上传 多文件 、单文件上传 上传按钮 在data声明fileList对象用来保存文件数据,本次实验限制上传数量最多为3个,单文件上传方式每次获取 file对象里的file文件即可 // 移除图片 ...
  • 参考文献 ...主要是自动上传 点击按钮之后选择文件之后变上传(不需要点击其他上传按钮) <el-upload action="#" :limit="limitNum" :auto-upload="true" :before-upload="handleBeforeUpload
  • 样式使用的是vux的cell组件 如下图的官方demo样子上图的样式需要修改一下,把 保护 修改成一个图片 并且内嵌一个input type=‘file'就可以拥有好看的样式的文件上传了import { Cell } from 'vux'下面我们要改造...
  • vue+elementui 上传文件时限制上传文件的类型和大小 重点属性–:before-upload="beforeAvatarUpload" html代码: <el-upload class="upload-demo" ref="upload1" :action="baseUrl+'/module/v1/manage/'" :...
  • Ant Design Vue如何上传文件、图片,复制即用

    千次阅读 多人点赞 2021-11-22 16:34:49
    上传文件之前的钩子,参数为上传文件,若返回false则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传( resolve 传入File或Blob对象则上传 resolve 传入对象)。...
  • 公司实现文件上传技术选型采用后端SpringBoot/Cloud,前端vue Bootstrap ,阿里云OSS作为文件存储,文件上传功能单独抽取封装文件上传组件,可供所有的文件的操作。 后端框架 版本 SpringBoot 2.5.6 ...
  • 文件的上传常规的文件上传是通过form表单包裹file类型的input标签进行上传,在form里面的属性定义上传方式如post,上传地址url,或者通过如elementUI的upload模块进行一系列的上传操作.但很多时候我们并不需要用到...
  • 很多时候,可以选择把文件POST给后端,然后利用后端去解析excel拿到数据,这次来试试前端直接解析。 这个前端解析过程,踩了几个坑,写个总结,记录一下。 一、前置条件 1、需要安装xlsx库 npm install xlsx ...
  • 文件,多文件看需求都没问题,前端代码弹窗界面如下: :visible.sync="excelVisible" 默认false自定义,ture开始弹窗,改变值是uploadaaa() <!-- excel上传弹窗 --> <el-dialog title="excel上传...
  • 首先来说前端上传表格,然后利用纯前端技术进行解析表格的办法 详细步骤----请点击这里 接下来来说上传发送给后端的代码实现 html <input ref="myInput" type="file" class="my_input" :multiple="myMultiple" ...
  • 文件上传,后端接收到多次请求 vue实现 <el-upload class="upload-demo" action="http://10.240.46.88:8081/upload1" :on-preview="handlePreview" :on-remove="handleRemove" :multiple="multiple" :...
  • 文章目录vueDjango vue 用了element ui的el-upload组件 1.HTML代码 <!--index.vue--> <el-upload class="upload-demo" :action="uploadZip()" :on-success="getFilePath" :file-list="fileList"> &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 327,738
精华内容 131,095
关键字:

vue中怎么上传文件

vue 订阅