温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

自定义input组件怎么实现拖拽文件上传

发布时间:2023-03-28 16:57:35 来源:亿速云 阅读:167 作者:iii 栏目:开发技术

这篇“自定义input组件怎么实现拖拽文件上传”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“自定义input组件怎么实现拖拽文件上传”文章吧。

    自定义input组件实现拖拽文件上传

    vue部分

    <tag-input
     id="uploadTag"
     ref="uploadTag"
     v-model="fileNameList"
     size="small"
     @input="removeFile"
    ></tag-input>

    逻辑部分

    页面加载时监听拖拽事件,监听后将文件放置下发fileList参数列表中

      mounted() {
        setTimeout(() => {
          this.$nextTick(() => {
            if (this.$refs.uploadTag) {
              let dropEle = this.$refs.uploadTag.$el
     
              // 禁止拖拽文件后打开文件
              dropEle.addEventListener('drop', e => {
                e.preventDefault();
                e.stopPropagation();
              }, false)
     
              dropEle.addEventListener('dragover', e => {
                e.preventDefault();
                e.stopPropagation();
              }, false)
     
              dropEle.addEventListener('dragleave', e => {
                e.preventDefault();
                e.stopPropagation();
              }, false)
     
              // 处理拖拽文件的逻辑
              dropEle.addEventListener('drop', e => this.watchFileUpload(e))
            }
          })
        }, 1000)
      }
      // 拖拽上传
      private watchFileUpload(e) {
        e.preventDefault();
        e.stopPropagation();
     
        var df = e.dataTransfer;
        var dropFiles = []; // 拖拽的文件,会放到这里
        var dealFileCnt = 0; // 读取文件是个异步的过程,需要记录处理了多少个文件了
        var allFileLen = df.files.length; // 所有的文件的数量,给非Chrome浏览器使用的变量
     
        // 检测是否已经把所有的文件都遍历过了
        function checkDropFinish() {
          dealFileCnt++;
        }
     
        if (df.items !== undefined) {
          // Chrome拖拽文件逻辑
          for (var i = 0; i < df.items.length; i++) {
            var item = df.items[i];
            if (item.kind === "file" && item.webkitGetAsEntry().isFile) {
              var file = item.getAsFile();
              dropFiles.push(file);
            }
          }
        } else {
          // 非Chrome拖拽文件逻辑
          for (var i = 0; i < allFileLen; i++) {
            var dropFile = df.files[i];
            if (dropFile.type) {
              dropFiles.push(dropFile);
              checkDropFinish();
            } else {
              try {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(dropFile.slice(0, 3));
     
                fileReader.addEventListener('load', function (e) {
                  console.log(e, 'load');
                  dropFiles.push(dropFile);
                  checkDropFinish();
                }, false);
     
                fileReader.addEventListener('error', function (e) {
                  console.log(e, 'error,不可以上传文件夹');
                  checkDropFinish();
                }, false);
     
              } catch (e) {
                console.log(e, 'catch error,不可以上传文件夹');
                checkDropFinish();
              }
            }
          }
        }
        dropFiles.forEach(item => {
          this.fileList.push(item)
        })
        this.fileNameList = this.fileList.map(item => {
          if (item.name) {
            return item.name
          }
          if (item.fileName) {
            return item.fileName
          }
        });
      }

    删除当前文件

      // 附件删除 下拉框
      private removeFile(nameList, name) {
        // 记录删除的附件信息
        this.fileList.splice(this.fileList.findIndex(item => item.fileName === name || item.name === name), 1)
        this.fileNameList = this.fileList.map(item => item.name || item.fileName);
      }

    封装的tag-input组件

    <template>
      <div
        class="yh-input-tag input-tag-wrapper"
        ref="InputTag"
        @click="foucusTagInput"
      >
        <el-tag
          v-for="(tag, idx) in innerTags"
          :key="tag"
          :size="size"
          :closable="!readonly"
          :disable-transitions="false"
          @close="remove(tag, idx)"
          >{{ tag }}</el-tag
        >
        <input
          :readonly="readonly || readonlyIpt"
          class="tag-input"
          :class="[size ? 'yh-input-tag--' + size : '']"
          :
          :placeholder="isplaceholder"
          v-model="newTag"
          @keydown.delete.stop="removeLastTag"
          @keydown="addNew"
          @blur="blurTagInput"
        />
      </div>
    </template>
     
    <script>
     
    export default {
      name: 'InputTag',
      props: {
        value: {
          type: Array,
          default: () => []
        },
        addTagOnKeys: {
          type: Array,
          default: () => [13, 188, 9]
        },
        readonly: {
          type: Boolean,
          default: false
        },
        // 输入框只读
        readonlyIpt: {
          type: Boolean,
          default: false
        },
        size: String,
        placeholder: {
          type: String,
          default: '请输入'
        }
      },
      inject: {
        elForm: {
          default: ''
        },
        elFormItem: {
          default: ''
        }
      },
      data () {
        return {
          newTag: '',
          innerTags: [...this.value],
          currentTag: null,
          widthStyle: {
            minWidth: '10px'
          }
        }
      },
      computed: {
        isplaceholder () {
          let str = ''
          if(this.value?.length > 0) {
            this.$nextTick(() => {
              if (this.$refs.yhInputTag) {
                this.$refs.InputTag.style.padding = '0'
              }
            })
            str = ''
          } else {
            this.$nextTick(() => {
              if (this.$refs.yhInputTag) {
                this.$refs.InputTag.style.padding = '0 15px'
              }
            })
            str = this.placeholder
          }
          return str
        },
        // 表单禁用关联
        inputDisabled() {
          return this.disabled || (this.elForm || {}).disabled;
        }
      },
      watch: {
        value: {
          handler(newVal, oldVal) {
            if (this.elForm && oldVal !== undefined && newVal !== oldVal) {
              this.elForm.validateField(this.elFormItem.prop)
            }
            if (newVal) {
              this.innerTags = [...newVal]
            }
          },
          deep: true,
          immediate: true
        }
      },
      methods: {
        foucusTagInput () {
          if (this.readonly || this.readonlyIpt || !this.$el.querySelector('.tag-input')) {
            return
          } else {
            this.$el.querySelector('.tag-input').focus()
            this.widthStyle = {
              minWidth: '10px'
            }
          }
        },
        blurTagInput (e) {
          this.addNew(e)
          this.widthStyle = {
            width: '0px'
          }
        },
        addNew (e) {
          if (e && (!this.addTagOnKeys.includes(e.keyCode)) && (e.type !== 'blur')) {
            return
          }
          if (e) {
            e.stopPropagation()
            e.preventDefault()
          }
          let addSuucess = false
          if (this.newTag.includes(',')) {
            this.newTag.split(',').forEach(item => {
            if (this.addTag(item.trim())) {
                addSuucess = true
              }
            })
          } else {
            if (this.addTag(this.newTag.trim())) {
              addSuucess = true
            }
          }
          if (addSuucess) {
            this.tagChange()
            this.newTag = ''
          }
        },
        addTag (tag) {
          tag = tag.trim()
          if (tag && !this.innerTags.includes(tag)) {
            this.innerTags.push(tag)
            return true
          }
          return false
        },
        remove (tag, index) {
          this.innerTags.splice(index, 1)
          this.currentTag = tag
          this.tagChange()
        },
        removeLastTag () {
          if (this.newTag) {
            return
          }
          this.innerTags.pop()
          this.tagChange()
        },
        tagChange () {
          this.$forceUpdate()
          this.$emit('input', JSON.parse(JSON.stringify(this.innerTags)), this.currentTag)
        }
      }
    }
    </script>
     
    <style scoped>
    .input-tag-wrapper {
      position: relative;
      font-size: 14px;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      box-sizing: border-box;
      color: #575757;
      display: inline-block;
      cursor: text;
      outline: none;
      padding: 0 15px;
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
      line-height: normal;
      &:hover{
        border-color: #C5C6C7;
      }
      &:focus{
        border-color: #d32f2f;
      }
      .el-tag{
        box-sizing: border-box;
        border-color: transparent;
        margin: 2px 0 2px 6px;
        background-color: #f0f2f5;
        display: inline-flex;
        max-width: 100%;
        align-items: center;
      }
    }
     
    .tag-input {
      background: transparent;
      border: 0;
      font-size: 14px;
      outline: none;
      padding-left: 0;
      height: 26px;
      &::placeholder {
        color: #C8C9CA;
      }
    }
    .yh-input-tag--mini{
      height: 26px;
      line-height: 26px;
      .tag {
        height: 16px;
      }
    }
     
    .yh-input-tag--small{
      height: 30px;
      line-height: 30px;
      .tag {
        height: 20px;
      }
    }
     
    .yh-input-tag--medium{
      height: 34px;
      line-height: 34px;
      .tag {
        height: 24px;
      }
    }
     
    // 表单标签选择器必填样式
    .el-form-item.is-error .input-tag-wrapper,
    .el-form-item.is-error .input-tag-wrapper:focus {
      border-color: #bc1126 !important;
    }
    </style>

    最后实现的效果

    自定义input组件怎么实现拖拽文件上传

    可支持手动拖拽上传 

    多图上传组件vue

    组件template部分

    多图上传按钮+多图上传弹窗+图片上的预览删除图标

    <template>
    <div>
        <div class="many">
          <el-form-item>
            <div class="upload-item">
              <el-button type="primary" @click="uploadFile">多图上传</el-button>
            </div>
          </el-form-item>
        </div>
    
      <el-dialog title="图片预览" :visible.sync="dialogImgVisible" width="50%">
        <img :src="dialogImageUrl" alt="" class="previewImg" />
      </el-dialog>
    
    
      <!--多图上传弹窗界面-->
    <el-dialog :title="'上传'" :visible.sync="dialogFormVisible" custom-class="pub_dialog" >
      <el-form >
        <!--内容部分  -->
        <el-form-item><!---->
            <div >
              <label>选择文件:</label>
              <div>
                <div class="desc">支持 jpg, png 图片格式,且不超过500kb</div>
                <el-upload
                    :action="UPLOAD_URL"
                    :headers="authorToken"
                    :auto-upload="true"
                    accept="image/jpg,image/png,image/jpeg"
                    :on-success="handleSuccess"
                    :before-upload="handleBeforeUpload"
                    :show-file-list="false"
                    multiple
                    :limit="10"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                  <el-button size="small" type="primary">上传图片</el-button>
                </el-upload>
              </div>
            </div>
    
              <div class="fileList" >
                <div class="item" v-for="(item,index) in images" :key="index">
                  <img :src="item.url" alt="" :key="index"  class = "imgList">
                  <div class="scissor-icon">
                    <i class="el-icon-scissors" @click="changeFile(item)"></i>
                  </div>
                  <div class="delete-icon">
                    <i class="el-icon-delete" @click="handleRemove(item)"></i>
                  </div>
                  <div class="search-icon">
                    <i class="el-icon-search" @click="handlePreview(item)"></i>
                  </div>
                  <el-input
                      type="textarea"
                      :autosize="{ minRows: 7, maxRows: 7}"
                      placeholder="请输入图片描述"
                      v-model="item.manyDescription"
                      :key="index"
                      >
                  </el-input>
                </div>
              </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </el-dialog>
    </div>
    </template>

    组件script部分

    1.变量数据区域

    代码如下(示例):

    <script>
    export default {
      name: "UploadMany",
      data() {
        return {
          textarea:'',
          dialogImageUrl: '',
          dialogImgVisible: false,
          dialogVisible: false,
          fileList: [],
          imgs: [],
          images: [],
          UPLOAD_URL: "/v1/admin/common/upload",//这里填写你的后端上传接口地址
          authorToken: {
            Authorization: 'Bearer ' + sessionStorage.getItem("token"),
            siteId:sessionStorage.getItem("siteId")
          },
          param: {
            token: ''
          },
          fileNum: 0,
          num: 0,
          dialogFormVisible: false,//添加表单弹出框是否显示
          dialogChangeVisible: false,
          picsList: [],  //页面显示的数组
          // 防止重复提交
          loading: true,
        }
      },

    2.方法区域

    代码如下(示例):

    methods: {
    	//删除方法
        handleRemove(file) {
          console.log(file)
          // 1.获取将要删除的图片的临时路径
          const filePath = file.url
          // 2.从数组中,找到这个图片对应的索引值
          const i = this.imgs.findIndex((x) => x.url === filePath)
          // 3.调用数组的 splice 方法,把图片信息对象,从 pics 数组中移除
          this.imgs.splice(i, 1)
          console.log(this.imgs)
        },
        //预览方法
        handlePreview(file) {
          console.log(file);
          this.dialogImageUrl = file.url;
          this.dialogImgVisible = true;
        },
        //限制上传文件个数
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 10 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
        },
        //上传成功后
        handleSuccess(response, fileList) {
          console.log(response);
          console.log(fileList)
          this.loading = false
          if(response.code === 200){
            this.imgs.push({name: response.data.resourceName, url: response.data.resourceUrl, manyDescription: '', manyResourceId: response.data.id})
            this.num++;
            if(this.num == this.fileNum){
              for(let i = 0; i < this.num ; i++){
                this.$emit('getManyImg', this.imgs[i])
              }
              this.num = 0;
              this.fileNum = 0;
              this.images = this.imgs;
              this.imgs = [];
            }
          }else{
            this.$message.error('上传失败');
          }
        },
        
        handleBeforeUpload(file) {
          // 这里做可以做文件校验操作
          const isImg = /^image\/\w+$/i.test(file.type)
          if (!isImg && this.fileType == 'image/*') {
            this.$message.error('只能上传 JPG、PNG、GIF 格式!')
            return false
          }
          this.fileNum++;
        },
    
        uploadFile(){
          this.dialogFormVisible = true;
          this.loading = false;
        },
        
        closeDialog(){
          this.dialogFormVisible = false;
          this.imgs = [];
          this.images = [];
        }
    
      }
    }

    组件使用

    1.在你需要用到的界面vue里导入组件

    import UploadMany from '@/components/upload/UploadMany';
    import {getToken} from '@/utils/auth';
    export default {
      name: "TestEditor",
      components: {
        UploadMany,
      },

    2.template部分使用组件

                <el-col :span="24">
                  <el-form-item prop="manyImg" label="多图上传:" :label-width="imgWidth" class="form">
                    <upload-many v-model="dialogForm.manyImg" @getManyImg="getManyImg" ></upload-many>
                    <div class="fileList" >
                      <div class="item" v-for="(itemPhoto,indexPhoto) in dialogForm.images" :key="indexPhoto">
                        <div class="item-left" >
                          <img :src="itemPhoto.url" alt="" :key="indexPhoto" class = "imgList">
                         <div class="item-bottom">
                           <div class="search-icon">
                             <i class="el-icon-search" @click="handlePreview(itemPhoto)"></i>
                           </div>
                           <div class="delete-icon">
                             <i class="el-icon-delete" @click="handleRemove(itemPhoto)"></i>
                           </div>
                         </div>
                        </div>
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 7, maxRows: 7}"
                            placeholder="请输入图片描述"
                            v-model="itemPhoto.manyDescription"
                            >
                        </el-input>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>

    3.方法部分

        getManyImg(imgs) {
          this.dialogForm.images.push(imgs);
          console.log(this.dialogForm.images)
        },
            handleRemove(file) {
          console.log(file)
          // 1.获取将要删除的图片的临时路径
          const filePath = file.url
          // 2.从数组中,找到这个图片对应的索引值
          const i = this.dialogForm.images.findIndex((x) => x.url === filePath)
          // 3.调用数组的 splice 方法,把图片信息对象,从 pics 数组中移除
          this.dialogForm.images.splice(i, 1)
        },
        //预览图片
        handlePreview(file) {
          console.log(file);
          this.dialogImageUrl = file.url;
          this.dialogImgVisible = true;
        },

    组件完整代码(含裁剪组件,不需要请手动删除)

    <template>
    <div>
        <div class="many">
          <el-form-item>
            <div class="upload-item">
              <el-button type="primary" @click="uploadFile">多图上传</el-button>
            </div>
          </el-form-item>
        </div>
    
      <!--裁剪弹窗-->
      <!-- vueCropper 剪裁图片实现-->
      <el-dialog title="图片剪裁" :visible.sync="dialogChangeVisible" append-to-body>
        <div class="cropper-content">
          <div class="cropper" >
            <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :fixed="option.fixed"
                :fixedNumber="option.fixedNumber"
                :centerBox="option.centerBox"
                :infoTrue="option.infoTrue"
                :fixedBox="option.fixedBox"
            ></vueCropper>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogChangeVisible = false">取 消</el-button>
          <el-button type="primary" @click="finish" :loading="loading">确认</el-button>
        </div>
      </el-dialog>
    
      <el-dialog title="图片预览" :visible.sync="dialogImgVisible" width="50%">
        <img :src="dialogImageUrl" alt="" class="previewImg" />
      </el-dialog>
    
    
      <!--多图上传弹窗界面-->
    <el-dialog :title="'上传'" :visible.sync="dialogFormVisible" custom-class="pub_dialog" >
      <el-form >
        <!--内容部分  -->
        <el-form-item><!---->
            <div >
              <label>选择文件:</label>
              <div>
                <div class="desc">支持 jpg, png 图片格式,且不超过500kb</div>
                <el-upload
                    :action="UPLOAD_URL"
                    :headers="authorToken"
                    :auto-upload="true"
                    accept="image/jpg,image/png,image/jpeg"
                    :on-success="handleSuccess"
                    :before-upload="handleBeforeUpload"
                    :show-file-list="false"
                    multiple
                    :limit="10"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                  <el-button size="small" type="primary">上传图片</el-button>
                </el-upload>
              </div>
            </div>
    
              <div class="fileList" >
                <div class="item" v-for="(item,index) in images" :key="index">
                  <img :src="item.url" alt="" :key="index"  class = "imgList">
                  <div class="scissor-icon">
                    <i class="el-icon-scissors" @click="changeFile(item)"></i>
                  </div>
    <!--                <div class="refresh-icon">-->
    <!--                  <i class="el-icon-refresh" @click="handleRemove()"></i>-->
    <!--                </div>-->
                  <div class="delete-icon">
                    <i class="el-icon-delete" @click="handleRemove(item)"></i>
                  </div>
                  <div class="search-icon">
                    <i class="el-icon-search" @click="handlePreview(item)"></i>
                  </div>
                  <el-input
                      type="textarea"
                      :autosize="{ minRows: 7, maxRows: 7}"
                      placeholder="请输入图片描述"
                      v-model="item.manyDescription"
                      :key="index"
                      >
                  </el-input>
                </div>
              </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </el-dialog>
    </div>
    </template>
    <script>
    import VueCropper from 'vue-cropper'
    import Vue from "vue";
    Vue.use(VueCropper)
    export default {
      name: "UploadMany",
      data() {
        return {
          textarea:'',
          dialogImageUrl: '',
          dialogImgVisible: false,
          dialogVisible: false,
          fileList: [],
          imgs: [],
          images: [],
          UPLOAD_URL: "/v1/admin/common/upload",
          authorToken: {
            Authorization: 'Bearer ' + sessionStorage.getItem("token"),
            siteId:sessionStorage.getItem("siteId")
          },
          param: {
            token: ''
          },
          fileNum: 0,
          num: 0,
          dialogFormVisible: false,//添加表单弹出框是否显示
          dialogChangeVisible: false,
          // 裁剪组件的基础配置option
          option: {
            img: '', // 裁剪图片的地址
            info: true, // 裁剪框的大小信息
            outputSize: 0.8, // 裁剪生成图片的质量
            outputType: 'jpeg', // 裁剪生成图片的格式
            canScale: false, // 图片是否允许滚轮缩放
            autoCrop: true, // 是否默认生成截图框
            // autoCropWidth: 300, // 默认生成截图框宽度
            // autoCropHeight: 200, // 默认生成截图框高度
            fixedBox: true, // 固定截图框大小 不允许改变
            fixed: true, // 是否开启截图框宽高固定比例
            fixedNumber: [7, 5], // 截图框的宽高比例
            full: true, // 是否输出原图比例的截图
            canMoveBox: false, // 截图框能否拖动
            original: false, // 上传图片按照原始比例渲染
            centerBox: false, // 截图框是否被限制在图片里面
            infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          },
          picsList: [],  //页面显示的数组
          // 防止重复提交
          loading: true,
        }
      },
      methods: {
        handleRemove(file) {
          console.log(file)
          // 1.获取将要删除的图片的临时路径
          const filePath = file.url
          // 2.从数组中,找到这个图片对应的索引值
          const i = this.imgs.findIndex((x) => x.url === filePath)
          // 3.调用数组的 splice 方法,把图片信息对象,从 pics 数组中移除
          this.imgs.splice(i, 1)
          console.log(this.imgs)
        },
        handlePreview(file) {
          console.log(file);
          this.dialogImageUrl = file.url;
          this.dialogImgVisible = true;
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 10 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
        },
        handleSuccess(response, fileList) {
          console.log(response);
          console.log(fileList)
          this.loading = false
          if(response.code === 200){
            this.imgs.push({name: response.data.resourceName, url: response.data.resourceUrl, manyDescription: '', manyResourceId: response.data.id})
            this.num++;
            if(this.num == this.fileNum){
              for(let i = 0; i < this.num ; i++){
                this.$emit('getManyImg', this.imgs[i])
              }
              this.num = 0;
              this.fileNum = 0;
              this.images = this.imgs;
              this.imgs = [];
            }
          }else{
            this.$message.error('上传失败');
          }
        },
        // 裁剪按钮   限制图片大小
        changeFile(file) {
          console.log(file)
          this.option.img = file.url
          console.log(this.option.img)
          this.dialogChangeVisible = true
        },
        // 点击裁剪
        finish() {
          this.$refs.cropper.getCropBlob((data) => {
            console.log(data)
            console.log(data.size)
            this.$data.dialogChangeVisible = false
            this.axios.post("/v1/admin/common/upload",data).then((res) => {
              let code = res.data.code;
              if (code == 200) {
                this.$data.dialogFormVisible = false
                this.$message.success("上传成功");
              }
            }).catch((error) => {
              console.log(error);
            });
          })
        },
        handleBeforeUpload(file) {
          // 这里做可以做文件校验操作
          const isImg = /^image\/\w+$/i.test(file.type)
          if (!isImg && this.fileType == 'image/*') {
            this.$message.error('只能上传 JPG、PNG、GIF 格式!')
            return false
          }
          this.fileNum++;
        },
    
        uploadFile(){
          this.dialogFormVisible = true;
          this.loading = false;
        },
        closeDialog(){
          this.dialogFormVisible = false;
          this.imgs = [];
          this.images = [];
        }
    
      }
    }
    </script>
    <style lang="scss" scoped>
    .el-dialog{
      width: 50%;
    }
    .item {
      width: 300px;
      height: 140px;
      position: relative;
      display: flex;
      margin: 10px;
    
      .delete-icon {
        display: none;
      }
      .refresh-icon {
        display: none;
      }
      .search-icon {
        display: none;
      }
      .scissor-icon {
        display: none;
      }
    
      &:hover {
        .scissor-icon {
          display: block;
          position: absolute;
          width: 35px;
          height: 40px;
          line-height: 40px;
          left: 100px;
          top: 100px;
          background: rgba(59, 60, 61, 0.5);
          // box-sizing: content-box;
          z-index: 999;
          cursor: pointer;
          text-align: center;
          i {
            margin: 8px 10px 0 0;
            display: block;
            font-size: 24px;
            color: white;
          }
        }
        .delete-icon {
          display: block;
          position: absolute;
          width: 35px;
          height: 40px;
          left: 0px;
          top: 100px;
          background: rgba(59, 60, 61, 0.5);
          // box-sizing: content-box;
          z-index: 999;
          cursor: pointer;
          text-align: center;
          i {
            margin: 8px 10px 0 10px;
            display: block;
            font-size: 24px;
            color: white;
          }
        }
        .refresh-icon {
          display: block;
          position: absolute;
          width: 35px;
          height: 40px;
          left: 35px;
          top: 100px;
          background: rgba(59, 60, 61, 0.5);
          // box-sizing: content-box;
          z-index: 999;
          cursor: pointer;
          text-align: center;
          i {
            margin: 8px 10px 0 0;
            display: block;
            font-size: 24px;
            color: white;
          }
        }
        .search-icon {
          display: block;
          position: absolute;
          width: 65px;
          height: 40px;
          left: 35px;
          top: 100px;
          background: rgba(59, 60, 61, 0.5);
          // box-sizing: content-box;
          z-index: 999;
          cursor: pointer;
          text-align: center;
          i {
            margin: 8px 10px 0 10px;
            display: block;
            font-size: 24px;
            color: white;
          }
        }
    
      }
    }
    .imgList {
      border: 1px dashed #d9d9d9;
      border-radius: 5px;
      box-sizing: border-box;
      width: 180px;
      height: 180px;
      margin-top: 0px;
    &:hover {
       border: 1px dashed #409eff;
     }
    }
    
    // 截图
    .cropper-content {
      .cropper {
        width: auto;
        height: 300px;
      }
    }
    
    .previewImg {
      width: 50%;
      height: 100%
    }
    </style>

    效果展示

    自定义input组件怎么实现拖拽文件上传

    以上就是关于“自定义input组件怎么实现拖拽文件上传”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI