精华内容
下载资源
问答
  • vue实现点击图片上传

    千次阅读 2019-06-04 16:11:08
    实现的效果 这里使用action,如果后面不是直接跟后台的接口的话就会报错,这里可以忽略掉,因为在钩子函数中有连接口 ...在methods中写入方法,利用文件上传之前的钩子函数 图片的删除,根据每张图片的索引 ...

    实现的效果
    在这里插入图片描述
    这里使用action,如果后面不是直接跟后台的接口的话就会报错,这里可以忽略掉,因为在钩子函数中有连接口
    报错
    在这里插入图片描述
    这里图片允许上传的类型是任何图片 accept=“image/*”

    在这里插入图片描述这个是可以上传多张图片的,所以要先在data中定义图片列表,随便起个名
    在这里插入图片描述
    在methods中写入方法,利用文件上传之前的钩子函数
    在这里插入图片描述
    图片的删除,根据每张图片的索引
    在这里插入图片描述

    展开全文
  • vue 点击图标实现上传文件效果

    千次阅读 2019-01-04 17:03:23
    第一种是用相对定位、绝对位、overflow 配合opacity 实现<span class="fileinput-button "> <i class="fa fa-folder-open-o" aria-hidden=&...

    查了好多网友的文章,有两种方法

    • 第一种是用相对定位、绝对位、overflow 配合opacity 实现
      <span class="fileinput-button ">
         <i class="fa fa-folder-open-o" aria-hidden="true"></i>
         <input type="file" multiple>
       </span>
      
      css
      .fileinput-button {
       position: relative;
       display: inline-block;
       overflow: hidden;
      }
      .fileinput-button input {
       position: absolute;
       right: 0px;
       top: 0px;
       opacity: 0;
      }
      
    • 第二种是用label,再把input 设为透明;透明了还是会占用空间 需要加个父标签,设置宽度,超过再隐藏
      <label for="fileInput">
        <i class="fa fa-folder-open-o" aria-hidden="true"></i>
      </label>
      <input v-show="false" type="file" id="fileInput" style=" opacity: 0;">
      

    • 第三种方法: 短小精干 我喜欢 不用设置css;
      <label for="fileInput">
        <i class="fa fa-folder-open-o" aria-hidden="true"></i>
      </label>
      <input v-show="false" type="file" id="fileInput">
      
    展开全文
  • vue实现 上传并读取文件

    千次阅读 2019-12-05 21:18:37
    实现结果:可上传多个文件点击可在下方查看,可删除 所用知识点: FileReader读取文件 FileReader官方可用四种方法读取文件。分别为readAsArrayBuffer(此方法用来将文件存储为二进制数据)、...

    需求:用户要求上传.sql文件并解析

    实现结果:可上传多个文件,点击可在下方查看,可删除

    所用知识点:

    FileReader读取文件

    FileReader官方可用四种方法读取文件。分别为readAsArrayBuffer(此方法用来将文件存储为二进制数据)、readAsBinaryString(此方法将文件存储为二进制,已废除用readAsArrayBuffer来代替)、readAsDataURL(此方法将文件存储为base64编码格式,常用来读取图片)、readAsText(此方法将文件存储为普通字符串格式)

    一下为实现该功能代码:

    <template>
        <div>
            <div class="d-flex justify-content-end mb-2">
                <el-tag
                    class="mr-1"
                    v-for="(tag, index) in uploadList"
                    :key="tag + index + Date"
                    closable
                    @click="handelShowShell(tag)"
                    @close="handelDeleteShell(tag.name, index)"
                    type="success">
                    {{tag.name}}
                </el-tag>
                <el-upload
                    class="upload-demo col-2 text-right"
                    action=""
                    multiple
                    accept=".sh, .sql"
                    :before-upload="handleBeforeUpload">
                    <el-button
                        type="text"
                        size="mini"
                        icon="el-icon-upload2">
                        上传脚本
                    </el-button>
                </el-upload>
            </div>
            <div>
                <code-mirror ref="import-code" v-model="commandData.data" class="border"
                             mode="shell" codePlaceholder="###请输入脚本###"></code-mirror>
            </div>
        </div>
    </template>
    <script>
        import CodeMirror from "../../../common/CodeMirror";
        import {showToast, confirm} from "../../../utils/messageUtils";
    
        export default {
            components: {
                CodeMirror
            },
            data() {
                return {
                    commandData: {},
                    uploadList: []
                };
            },
            methods: {
                handleBeforeUpload(file) {
                    const fileExt = file.name.split('.').pop().toLocaleLowerCase();
                    if (fileExt === 'sh' || fileExt === 'sql') {
                        this.file = file;
                        this.readData(file);
                    } else {
                        showToast(this, {message: '请选择后缀为"sh"或"sql"的文件', type: 'error'});
                    }
                    return false;
                },
                readData(file) {
                    let fileName = file.name;
                    let check = this.uploadList.some(item => item.name === fileName);
                    if (check) {
                        showToast(this, '不能上传重复的文件', 'warning');
                        return;
                    }
                    const reader = new FileReader();
                    reader.readAsText(file);
                    reader.onerror = e => {
                        showToast(this, {message: '读取文件错误', type: 'error'});
                    };
                    reader.onload = e => {
                        this.uploadList.push({
                            name: fileName,
                            data: e.target.result
                        });
                    };
                },
                // 点击标签查看shell文件
                handelShowShell(item) {
                    this.commandData = item;
                },
                // 删除shell
                handelDeleteShell(tagName, index) {
                    confirm(this, '确认要移除该文件么?').then(res => {
                        if (res === 'confirm') {
                            this.uploadList.splice(index, 1);
                            if (tagName === this.commandData.name) {
                                this.commandData = {
                                    data: ''
                                };
                            }
                        }
                    });
                }
            }
        };
    </script>
    <style lang="scss" scoped></style>
    

     

     

    展开全文
  • vue + element 实现文件上传

    万次阅读 2019-01-24 11:13:39
    当时写文件上传是一件让人难受的事情,测试了很久,终于完成。 写完之后超超超超超超级开心~ 效果如下图: 功能描述: 点击添加,可以增加多条,如下图: 2. 点击删除,顾名思义,删掉这一行。 3. 点击...

    当时写文件上传是一件让人难受的事情,测试了很久,终于完成。
    写完之后超超超超超超级开心~
    效果如下图:
    在这里插入图片描述
    功能描述:

    1. 点击添加,可以增加多条,如下图:
      在这里插入图片描述
      2. 点击删除,顾名思义,删掉这一行。
      3. 点击照片后面的 x 号,进行图片删除或更改
      如图:
      在这里插入图片描述
      4. 点击确定按钮,整合内容提交给接口
      难点攻克:
      1. 选择一个文件上传,添加第二条时,文件展示有误
      2. 如果我一次增加了多条上传框,但从非第一个的上传按钮上传时,添加到了第一个点击上传的按钮下
      3. 图片的自删和更换
      4. 最后的上传格式
        嗯,从以上几点来一步步来处理问题
        第一步,写出基本上传html:
    	  // fileUploadLength 是要添加几条tr的总个数
             <tr v-for="(item,index) in fileUploadLength" :key="index" style="width: 100%;height: 50px;">
                <td>
                  <input class="desc">  // 文件描述
                </td>
                <td>
                  <input class="ver">  // 文件版本
                </td>
                <td style="width: 100px">
                //上传 - 官网中就有
                  <el-upload
                    :on-remove="handleRemove" // 文件列表移除文件时的钩子
                    :before-upload="beforeUpload" // 上传文件之前的钩子,参数为上传的文件
                    :before-remove="beforeRemove"  // 删除文件之前的钩子,参数为上传的文件和文件列表
                    :limit="1" // 限制,每个上传按钮只能上传一个文件
                    :file-list="fileList[index]" // 文件组
                    :multiple="false" 
                    :on-exceed="handleExceed" // 文件超出个数限制时的钩子
                    class="upload-demo"
                    action="">
                    <el-button size="mini" type="primary" @click="clickUpload(index)">{{ $t('file.click_upload') }}</el-button>
                  </el-upload>
                </td>
                <td>
                 // 删除按钮
                  <el-button type="text" @click="deleteTr(index)">{{ $t('table.delete') }}</el-button>
                </td>
              </tr>
    

    第二步,充实对应的方法:

    1. 只要点击上传就会执行该方法:

    // 文件上传之时(文件不会上传成功,在触发下一步操作前截取文件信息)
        beforeUpload(file) {
          if (file) {
          // 添加-跳跃增 => 只能添加到第一位,后面的全删掉
            if (this.index === 0 && this.iNotUpload !== 0 && !this.addUpload) {
              this.fileUploadLength.splice(this.iNotUpload, this.fileUploadLength.length)
            }
            this.fileList[this.index++].push(file)
          }
          return false
        },
    

    现在来说一下,为什么官网直接用的是 fileList,而我的代码用的是 fileList[0]这样的呢?
    由于在这个添加会有增加多条tr,而每个tr都有一个上传按钮,如果直接用fileList,当我上传第一个文件之后,
    再添加第二条,就会出现第二个文件名也出现在了第一个上传按钮下方的情况。
    所以,为了文件和按钮的位置一一对应,使用下标控制。

    2. 上传后 return false 相当于上传并没成功,就会自动执行删除操作:

     // 文件列表移除文件时的钩子(就是点击文件后的 x 进行删除或更改的操作)
        handleRemove(file) {
        // 防止 上传没成功就直接删除了文件。
          if (file && file.status === 'success') {  
            for (let i = 0; i < this.fileList.length; i++) {
             // 若是点击要删除的文件名与文件组中的某个文件名相同,则取其下标
              if (this.fileList[i].length && file.name === this.fileList[i][0].name) {
                this.fileList.splice(i, 1)
                this.index = i
                this.fileList.splice(i, 0, []) // 删除该下标对应文件后,给该下标插入空数组占位,保证fileList长度
                this.addUpload = true
              }
            }
          }
        },
    

    3. 删除之前的询问

     // 删除文件之前的钩子-弹出框询问
        beforeRemove(file, fileList) {
          // 处理 before-upload验证不通过后触发了on-remove的解决办法
          if (file && file.status === 'success') {
            return this.$confirm('你确定删除这个文件?')
          }
        },
    

    4. 限制每个上传按钮对应文件的个数

      // 一个上传按钮只能添加一个文件,限制,不能超过一
        handleExceed(files, fileList) {
          this.$message.warning(this.$t('file.select_aPage'))
        },
    

    和组件中的 :limit 共同使用

    5. 上传:

    // 点击上传按钮,按照下标上传,处理同时有多个上传按钮 但不按顺序上传的问题
        clickUpload(i) {
          // 新增-上传
          if (i !== 0 && !this.addUpload) {
            this.iNotUpload = i
          }
        },
    

    6. tr 的增加:

    // tr的添加按钮
        addTr() {
          // 保证添加首条后再点击添加按钮首条添加文件不会消失
          if (this.fileList.length) {
            this.fileList = this.fileList
          } else {
            this.fileList = []
          }
          this.fileUploadLength.push(0)
          for (let i = 0; i < this.fileUploadLength.length; i++) {
            this.fileList.push([])
          }
        },
    

    7. tr 的删除:

        // tr的删除按钮
        deleteTr(index) {
          this.fileList.splice(index, 1)
          this.fileUploadLength.splice(index, 1)
          this.index--
        },
    

    前三个难点在上述代码中已经解决:
    难点一 => 下标控制
    难点二 => 上传前触发的钩子方法中,跳跃增的处理
    难点三 => 第二段代码,用splice(下标,个数,插入[ ])
    现在来处理最后一个难点: 走接口上传!
    当时在网上找资料的时候,看到组件中的action里必须要写内容,官网中也是:
    在这里插入图片描述
    所以我在这里是懵的,最后发现写不写都没啥影响,反正用不到里面的地址,最后都是要走接口的。
    方法详情参照链接:https://www.jianshu.com/p/e984c3619019
    最后整理文件:

          var formdata = new FormData() // 创建一个对象实例
           // 我们后台不识别直接传一个数组过去,分割成对象
          for (let i = 0; i < this.fileList.length; i++) {
            if (this.fileList[i].length) {
              formdata.append('files', this.fileList[i][0])
            }
          }
          // 若是后台能接收到完整的数组(前提是把fileList中的数组拆成对象):
            formdata.append('files', this.fileList)
          // 键值对类型(this.valObj对象是存放一些别的参数的)
          formdata.append('msgupgradeFileGroup', JSON.stringify(this.valObj))
    
    

    这些功能是需要前后端联调的,最终完成真的特棒。
    项目中有添加也有编辑,这里只是整理了添加,编辑的话也都大同小异。希望以后会更进一步!

    展开全文
  • 关于vue+element上传文件post请求

    万次阅读 2018-12-21 14:21:45
    由于项目要求这里要实现点击上传文件 首先,我们需要写个上传组件 &lt;el-upload class="upload-demo" :action="doupload()" :before-upload="before_Upload" ref="...
  • => { // view是当前删除的路由 console.log('view1', view) commit('DEL_VISITED_VIEWS', view) resolve([...state.visitedViews]) }) } }, getters }) export default store //上传文件 async uploadFile (file) { ...
  • 一.前言项目中使用到比较多的关于Excel的前端...导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-butto...
  • 一、文件上传 <el-input v-model="fileName"></el-input> <el-button @click="choseFile" plain ><span class="upLoad iconfont icon-shangchuan...点击上传</el-button > <input
  • vue elementui 自定义方法实现上传文件

    千次阅读 2020-07-08 10:05:38
    需求:先上传文件点击导入调用事件。 实现:elementui uppload插件可以自动上传,但是我现在要做到点击按钮触发事件,折腾了半天,才实现要的效果,写下来,提醒自己记得这个过程吧。贴一部分关键代码(个人认为...
  • 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 icon=el-icon-upload type=primary size=mini click=importFile() >批量导入</el
  • vue实现上传图片和显示图片

    千次阅读 2020-08-21 19:27:24
    点击上传文件的input的时候,将图片上传到页面上,并且显示已经上传的图片,同时也可以保存到后台 // 因为input的上传按钮,会显示的比较突兀,所以在点击div的时候判断是否存在了上传文件的input,如果没有的话就...
  • 1. 上传文件后端没有提供没有单独的接口给前端返回url,另外的接口去下载文件 html: <el-upload ref="upload" action="" :auto-upload="false" :multiple="true" :on-change="changeFile"> <fin-...
  • vue-原生js实现文件上传

    千次阅读 2019-04-24 15:00:27
    1.按钮通过ref触发input的上传功能 ...点击上传</tk-button>(自定义标签) <input ref="inputUpLoad" style="display: none" type="file" accept="*" @change="handleFile"/> handle...
  • 参考文献 ...主要是自动上传 点击按钮之后选择文件之后变上传(不需要点击其他上传按钮) <el-upload action="#" :limit="limitNum" :auto-upload="true" :before-upload="handleBeforeUpload
  • Vue实现关于下载上传的进度条

    千次阅读 2020-05-12 14:06:28
    Vue实现里实现获取数据进度条前言注意 前言 实现上传文件的时候或者下载的时候,需要用到进度条 1.vue项目, 用的element ui组件库 代码调用片段: // 点击下载 clickDown() { // console.log('单个下载') let ...
  • vue用el-upload实现文件上传

    千次阅读 2020-06-05 22:22:11
    因为我是vue+springboot前后分离,要跨域,就不能用默认的action写请求地址,我用axios时最困扰的就是怎么拿到那个真实的文件,然后给传给后台。 其实可以通过自带的onchanne触发方法获得文件列表,文件信息中那个...
  • vue upload 上传文件之删除文件

    千次阅读 2020-07-16 23:07:14
    在做图片上传时,用Element UI 组件库 upload组件,图片上传时通过文档流的形式,例如下面代码中的action的地址,需要提前协商好,但是Vue官网对删除只介绍了其中的一些并没有实现图片的删除功能, handleRemove...
  • vue.js+ElementUI+Springboot实现文件自定义上传 1、文件上传 文件上传使用的是elementUI组件,详情请点击链接elementUI文件上传组件 前端代码 <div style="height:100px;width:770px;overflow: hidden;text-...
  • 点击上传思路:将input的type设置为“file”类型即可上传文件。隐藏该input框,同时点击按钮时,调取该input的点击上传功能。剩下的就是css优化页面了。 拖拽上传思路:通过给拖拽框dropbox绑定拖拽事件,当组件销毁...
  • Vue+Springboot+el-upload组件实现文件手动上传 1.前端Vue + Element-UI库的el-upload组件 + axios发送请求 el-upload组件代码 ...accpent属性可以限制上传文件类型,直接填入后缀名即可 file-list属性为...
  • 接下来来说上传发送给后端的代码实现 html <input ref="myInput" type="file" class="my_input" :multiple="myMultiple" style="display:none;" @change="importExcel"> <el-button type="primary" style=...
  • Vue el-upload实现下载已上传文件

    千次阅读 2020-07-05 15:11:17
    如果想要通过点击上传文件实现下载操作,可以通过组件的on-preview属性实现: <template> <el-upload ref="upload" action="" :on-preview="handlePreview" :auto-upload="false"> <el-button ...
  • vue中利用ref属性实现隔山打牛 效果图: 利用ref属性来实现隔山打牛 页面代码: <button ref="me" @click="aa">我是aa</button> <button @click="bb">隔山打牛</button> js方法: aa(){ ...
  • VUE+SpringBoot实现文件上传(带参数传入后台) 前台:使用element-UI里面的 步骤一 先写一个文件上传的按钮(我这边是通过弹窗,将上传文件先加入弹窗点击确定在进行上传) <el-button size=“mini” icon=...
  • 相关组件 // 上传组件 ```javascript <el-upload class="upload-demo" :before-...点击上传</el-button> </el-upload> // 进度条组件 <el-progress :percentage="progress "></el-progress>
  • 前端界面:当用户点击上传文件按钮,选中待上传图片并点击确认后,这时应该把图片数据传给后台。当后台经过处理后返回结果,前端在根据响应结果做后续工作。 后端:后台拿到前端传过来的数据时,将图片文件...
  • Vue+SpringBoot实现图片上传和回显

    千次阅读 2019-08-28 15:19:46
    点击上传,通过文件流的方式把图片上传至服务器,服务器将图片保存至指定位置,并根据时间生成指定名称,上传成功,返回新生成文件名。 服务器自定义接口,通过需要的文件名,返回指定文件流 上传图片成功后,在旁边...
  • 点击上传,从本地选择图片文件 选择文件夹后进入模态框(将选择的图片塞入模态框) 模态框作为裁剪图片的容器 进行裁剪 获取裁剪后的结果 并将裁剪后的图片对象返回给父组件 父组件获取到裁剪后的图片文件 进行...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 165
精华内容 66
关键字:

vue实现点击上传文件

vue 订阅