当前位置 博文首页 > Vue触发input选取文件点击事件操作

    Vue触发input选取文件点击事件操作

    作者:LaLaLa_heng 时间:2021-09-06 19:14

    CSS

    .upload-btn-box {
      margin-bottom: 10px;
      button {
        margin-right: 10px;
      }
      input[type=file] {
        display: none;
      }
    }

    HTML

    <div class="upload-btn-box">
      <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="primary">点击上传</Button>
      <input ref="filElem" type="file" class="upload-file" @change="getFile">
    </div>

    Script

    choiceImg(){
      this.$refs.filElem.dispatchEvent(new MouseEvent('click')) 
    },
    getFile(){
          var that = this;
          const inputFile = this.$refs.filElem.files[0];
          if(inputFile){
            if(inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif'){
              alert('不是有效的图片文件!');
              return;
            }
            this.imgInfo = Object.assign({}, this.imgInfo, {
              name: inputFile.name,
              size: inputFile.size,
              lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()
            })
            const reader = new FileReader();
            reader.readAsDataURL(inputFile);
            reader.onload = function (e) {
              that.imgSrc = this.result;
            }
          } else {
            return;
          }
        }

    补充知识: vue下打包时几个文件选择文件打包一起 并做懒加载

    直接上代码

    const DeviceManage = r => require.ensure([], () => r(require(deviceManagePath + 'main/DeviceManage')), 'g-DeviceManage');
    const SingleDeviceSet = r => require.ensure([], () => r(require(deviceManagePath + 'deviceSet/SingleDeviceSet')), 'g-DeviceManage');
    const ModifyNo = r => require.ensure([], () => r(require(deviceManagePath + 'modifyNo/ModifyNo')), 'g-DeviceManage');
    const PricePerTime = r => require.ensure([], () => r(require(deviceManagePath + 'pricePerTime/PricePerTime')), 'g-DeviceManage');
    const SetParams = r => require.ensure([], () => r(require(deviceManagePath + 'setParams/SetParams')), 'g-DeviceManage');
    const ShowDevicePrice = r => require.ensure([], () => r(require(deviceManagePath + 'showDevicePrice/ShowDevicePrice')), 'g-DeviceManage');
    const parameterSetting = r => require.ensure([], () => r(require(deviceManagePath + 'parameterSetting/parameterSetting')), 'g-DeviceManage');
    const SetParams3G = r => require.ensure([], () => r(require(deviceManagePath + 'setParams3G/SetParams3G')), 'g-Device3Gparams');

    这么写 所有g-DeviceManage的文件会被打包在一起

    以上这篇Vue触发input选取文件点击事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持站长博客。

    jsjbwy
    下一篇:没有了