VUE组件系列7：文件上传2

Love The Way You Lie 2022-10-02 06:54 169阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

支持拖放上传

支持鼠标右键和Ctrl+v方式上传

就是有点丑，样式慢慢优化。。。。。。。。。

<template>
      <div
        class="pre_upload"
        @drop="okdrop($event)"
        @dragover="allowDrop($event)"
        v-on:paste="fun_paste($event)"
      >
        <div class="pre_leve_one"></div>
        <div class="pre_leve_two">
          <h4>请把文件拖放到这里来上传</h4>
          <div id="files_data" class="pre_files_data" v-show="show_tab">
            <table class="pre_dataintable">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>单号</th>
                  <th>名称</th>
                  <th>类型</th>
                  <th>Y/N</th>
                  <th>大小</th>
                  <th>进度</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in pre_flies" :key="index">
                  <td>{
        { item.id }}</td>
                  <td>{
        { item.sheet_no }}</td>
                  <td class="pre_tab_name">
                    {
        { item.name }}
                  </td>
                  <td>{
        { item.type }}</td>
                  <td>{
        { item.flag }}</td>
                  <td>{
        { item.size }} KB</td>
                  <td>{
        { item.up }}</td>
                  <td>
                    <button class="pre_btn_canle" @click="del_files(item.id)">
                      取消上传
                    </button>
                    <button class="pre_btn_ok" @click="lookImage(item)">
                      预览图片
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div>
              <button class="pre_btn_del_all" @click="canle_all">全部取消</button
              >  
              <button class="pre_btn_up" @click="submit_files">上传</button>
            </div>
          </div>
    
          
          
          
        </div>
        <div>
          <p>
            注意：复制黏贴实现方式为,使用鼠标右键里的复制,然后使用Ctrl+v到指定区域,才可以上传文件。
          </p>
          <p>Ctrl+c然后Ctrl+v方式无法上传文件。</p>
        </div>
        
        <div id="pop" class="pop_img" v-show="show_img">
          <div class="pop_head">
            <a class="close" href="javascript:void(0);" @click="hide()"></a>
          </div>
          <div id="pop_bodyup" class="pre_show_img">
            <img :src="imgsrc" />
          </div>
        </div>
        
        <per-message :message_data="msg_obj" />
      </div>
    </template> 
    
    <script>
    /*
    名称：拖放上传组件
    日期：2019-03-14
    作者：hj
    目标：
    1、将拖放的文件名称展示出来:拖放过来的有可能是一堆文件和文件夹混合 当放置被拖数据时，会发生 drop 事件。
    2、显示上传文件的进度
    3、最好可以支持预览
    4、2019-05-16 增加对复制黏贴上传方式的支持 
    
    */
    import '@/assets/css/pop.css';
    import { base_encode } from "@/utils/base64.js";
    import { GetShort,DeleteSpecialWord } from "@/utils/localstore.js";
    import { BrowserGet } from "@/utils/systemSelect.js";
    
    export default {
      name: "pre_upfile",
      components: {    
        'per-message':()=>import("./pre_message.vue")
      }, 
      data() {
        return {
          pre_flies: [],
          exist_data: [],
          show_tab: false,
          show_img:false,
          imgsrc: "",
          msg_obj:{},
          ok_name:''
        };
      }, 
      props: {
        post_action:String,
        sheet_no:String
      },  
      methods: {
        okdrop: async function(ev) {
          // 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
          ev.preventDefault();
    
          //绑定单号校验
          if(this.sheet_no===undefined || this.sheet_no==null || this.sheet_no==''){
            this.msg_obj={'showtype':'warning','note':'请您先选择要上传的文件的对应业务单据'};
            return;
          }
          // 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
          // var data=ev.dataTransfer.getData("Text");
          var back_data = [],
            ok_data = [];
          back_data = ev.dataTransfer.files; //获取文件           
          for (var i = 0; i < back_data.length; i++) {
            var td = {};
            td.id = i + 1;
            this.check_file_name(back_data[i].name);
            td.name = this.ok_name;
            
            td.type = back_data[i].type;
            // td.size=Math.round(Number(back_data[i].size)/1024);
            td.size = (Number(back_data[i].size) / 1024).toFixed(0);
            if (
              String(td.type)
                .toLowerCase()
                .indexOf(".exe") > 0
            ) {
              td.flag = "NO";
            } else {
              td.flag = "YES";
            }
            td.up = 0 + "%";
            td.sheet_no=this.sheet_no;  //当前点击选择 的单号
            td.filedata = await this.convertFileToString(back_data[i]);        
            ok_data[i] = td;
          }
          var j = 0;
          j = this.exist_data.length; 
          if (j > 0) {
            for (var i = 0; i < ok_data.length; i++) {
              this.exist_data[j] = ok_data[i];
              j += 1;
            }
            // 如果是多次拖放，需要进行二次整理
            var temp_d=[];
            for(var i=0;i<this.exist_data.length;i++){
              var temp_o={};
              temp_o.id = i + 1;
              temp_o.name = this.exist_data[i].name;
              temp_o.type = this.exist_data[i].type;
              temp_o.size = this.exist_data[i].size;
              temp_o.flag = this.exist_data[i].flag;
              temp_o.up = this.exist_data[i].up;
              temp_o.filedata= this.exist_data[i].filedata;
              temp_o.sheet_no= this.exist_data[i].sheet_no;
              temp_d[i]=temp_o;
            }
            this.pre_flies=temp_d;
          } else {
            this.exist_data = ok_data;
            this.pre_flies = this.exist_data;
          }
          
         
          this.show_tab = true;
          // var tf=document.getElementById("files_data");
          // tf.target.appendChild(files);
        },
        allowDrop: function(ev) {
          ev.preventDefault();
        },
        convertFileToString: function(tempfile) {
          return new Promise(resolve => {
            var tf = new FileReader();
            tf.readAsDataURL(tempfile);
            tf.onload = function() {
              resolve(this.result);
            };
          });
        },
        submit_files: async function() {
          this.exist_data = [];
          for (var i = 0; i < this.pre_flies.length; i++) {
            /*这块应该还可以用vuex 封装*/ 
            var postdata = "";
            postdata =
              '{"action":"'+this.post_action+'","user_no":"' +
              GetShort("userno") +
              '","upfile_name":"' +
              DeleteSpecialWord(this.pre_flies[i].name) +
              '","upfile_type":"' +
              this.pre_flies[i].type +
              '","upfile_size":"' +
              this.pre_flies[i].size +
              '","upfile_data":"' +
              this.pre_flies[i].filedata +
              '","sheet_no":"' +
              this.pre_flies[i].sheet_no +
              '"}';
            postdata =
              '{"method":"File_load","data":"' + base_encode(postdata) + '"}';
            var tp = this.pre_flies[i];
            await this.updatabyquere(postdata, tp);
          }
        },
        updatabyquere: function(postdata, tp) {
          // try {
            this.$postfile(
              "/Data_Back",
              postdata,
              res => {
                var loaded = 0,
                  total = 0;
                loaded = res.loaded;
                total = res.total;
                this.$nextTick(() => {
                  // console.log(tp);
                  tp.up = ((loaded / total) * 100).toFixed(2) + " %";
                });
              }
            ).then(res => {          
                res = JSON.parse(res);
                console.log(res);
                res = res.data;
                if (res.status == 1) {
                  tp.up = "上传成功";
                  this.msg_obj={'showtype':'ok','note':'上传成功'};
                } else {
                  tp.up = "上传失败";
                  this.msg_obj={'showtype':'ok','note':'上传失败\n\r'+res.msg};
                }
              
            });
          // } 
          // catch (ex) {
          //     tp.up = "上传失败\r\n"+ex;
          // }
        },
        del_files: function(id) {
          var data = []; 
          var j=0;
          for (var i = 0; i < this.pre_flies.length; i++) {        
            if (this.pre_flies[i].id != id) {
              data[j] = this.pre_flies[i];
              j+=1;
            }
          }
          this.pre_flies = data;
          if (this.pre_flies.length == 0) {
            this.show_tab = false;
          }
        },
        canle_all: function() {
          this.pre_flies = [];      
          this.exist_data = [];
          this.show_tab = false;
        },
        lookImage:function(parm){
          console.log('进来'+parm.name);
          if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG|ico|pdf)$/.test(parm.name)) {
            this.imgsrc=parm.filedata;
            this.show_img=true;
          }
        },
        closeImage:function(parm){
          console.log('出去');
          this.show_img=false;
        },
        hide:function(){
          this.show_img=false;
        },
        fun_paste:async function(e){
          var browserType=BrowserGet();
          console.log('浏览器类型 '+browserType);
          //绑定单号校验
          if(this.sheet_no===undefined || this.sheet_no==null || this.sheet_no==''){
            this.msg_obj={'showtype':'warning','note':'请您先选择要上传的文件的对应业务单据'};
            return;
          }
          var back_data = [],ok_data = [];
          if(browserType=='chrome' || browserType=='firefox' ){
            // console.log(e.clipboardData);
            // console.log(e.clipboardData.files);          
            
            back_data = e.clipboardData.files; //获取文件           
            for (var i = 0; i < back_data.length; i++) {
              var td = {};
              td.id = i + 1;
              this.check_file_name(back_data[i].name);
              td.name = this.ok_name;
              td.type = back_data[i].type;
              // td.size=Math.round(Number(back_data[i].size)/1024);
              td.size = (Number(back_data[i].size) / 1024).toFixed(0);
              if (
                String(td.type)
                  .toLowerCase()
                  .indexOf(".exe") > 0
              ) {
                td.flag = "NO";
              } else {
                td.flag = "YES";
              }
              td.up = 0 + "%";
              td.sheet_no=this.sheet_no;  //当前点击选择 的单号
              td.filedata = await this.convertFileToString(back_data[i]);        
              ok_data[i] = td;
            }
            
          }
    
          var j = 0;
          j = this.exist_data.length; 
          if (j > 0) {
            for (var i = 0; i < ok_data.length; i++) {
              this.exist_data[j] = ok_data[i];
              j += 1;
            }
            // 如果是多次拖放，需要进行二次整理
            var temp_d=[];
            for(var i=0;i<this.exist_data.length;i++){
              var temp_o={};
              temp_o.id = i + 1;
              temp_o.name = this.exist_data[i].name;
              temp_o.type = this.exist_data[i].type;
              temp_o.size = this.exist_data[i].size;
              temp_o.flag = this.exist_data[i].flag;
              temp_o.up = this.exist_data[i].up;
              temp_o.filedata= this.exist_data[i].filedata;
              temp_o.sheet_no= this.exist_data[i].sheet_no;
              temp_d[i]=temp_o;
            }
            this.pre_flies=temp_d;
          } else {
            this.exist_data = ok_data;
            this.pre_flies = this.exist_data;
          }
          if(this.pre_flies.length>0){
            this.show_tab = true;
          }
    
        },
        check_file_name:function(name){
          this.ok_name='';
          var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
          var maxLength = 6;
          var paramsAccount = '';
          for (var i = 0; i < maxLength; i++) {
              var id = Math.ceil(Math.random() * 35);
              paramsAccount += chars[id];
          }
          this.ok_name=paramsAccount+'_'+name;
          
        }  
      }
    };
    
    
    </script>
    
    
    <style scoped>
    .pre_upload {
      width: 100%;
      min-height: 200px;
      height: 100%;
      background-color: azure;
      text-align: center;
      /* padding: 10px 20px 10px 20px; */
    }
    .pre_leve_one {
      height: 5px;
    }
    
    .pre_leve_two {
      /* padding: 5px; */
      margin: 15px;
      margin-top: 15px;
      border: 1px solid #191970;
      min-height: 200px;
      height: auto;
    }
    
    .pre_files_data {
      width: 100%;
      min-height: 200px;
      height: auto;
      /* padding: 10px 20px 10px 20px; */
    }
    
    .pre_files_data > ul {
      list-style: none;
    }
    .pre_files_data > ul > li {
      border: 1px solid black;
    }
    .pre_files_data > ul > li > span {
      margin-left: 5px;
    }
    
    .pre_dataintable {
      margin-top: 15px;
      border-collapse: collapse;
      border: 1px solid #aaa;
      width: 95%;
      /* padding 没有作用 */
      /* padding: 0px 5px 10px 5px; */
      position: relative;
      left: 2%;
    }
    .pre_dataintable th {
      vertical-align: baseline;
      padding: 5px 15px 5px 6px;
      background-color: rgb(87, 201, 230);
      border: 1px solid #3f3f3f;
      text-align: left;
      color: #000000;
      font-size: 16px;
      font-weight: bolder;
    }
    .pre_dataintable td {
      vertical-align: text-top;
      padding: 6px 15px 6px 6px;
      border: 1px solid #aaa;
    }
    .pre_dataintable tr:nth-child(odd) {
      background-color: #f5f5f5;
    }
    .pre_dataintable tr:nth-child(even) {
      background-color: #fff;
    }
    
    .pre_tab_name {
      cursor: pointer;
      word-break: break-all;
    }
    .pre_tab_name:hover {
      cursor: pointer;
      background-color: #aaa;
    }
    /* 全部取消按钮 */
    .pre_btn_del_all {
      color: black;
      font-size: 16px;
      width: 100px;
      height: 30px;
      background-color: rgba(236, 26, 26, 0.986);
    }
    /* 上传按钮 */
    .pre_btn_up {
      color: black;
      font-size: 16px;
      width: 100px;
      height: 30px;
      background-color: rgba(44, 247, 61, 0.986);
    }
    /* 删除按钮 */
    .pre_btn_canle {
      color: black;
      font-size: 16px;
      width: 80px;
      height: 25px;
      background-color: rgba(236, 26, 26, 0.986);
    }
    .pre_show_img {
      width: 400px;
      height: 400px;
      text-align: center;
      margin-top: -40px;
      /* background-color: #000000; */
    }
    .pre_show_img > img {
      width: auto;
      height: 100%;
    }
    </style>

![870e5496ed969fcea41e0bd3d8965811ceb.jpg][]

转载于:https://my.oschina.net/qingqingdego/blog/3050322

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/2ca15614a43e4c01b4dc2804b2ca538c.png
[870e5496ed969fcea41e0bd3d8965811ceb.jpg]: /images/20220113/bdd0b99c648340f88f5ce7ba8390aac2.png