zoukankan      html  css  js  c++  java
  • vue 图片上传

    功能说明:

    1、调用手机拍照功能

    2、调用相册功能

    3、图片上传功能

    4、图片预览功能

    5、图片删除功能

    关键点:

    1、input 新增multiple
    2、accept="image/*处理IOS、安卓手机启用摄像头
    3、根据createObjectURL处理图片预览
    4、formData构造函数创建空对象
    5、通过formData.getAll(),把文件流数据转为数组

     

    组件示例图

    组件代码 upload_img.vue

    <template>
      <div class="content">
        <div class="imgBox">
          <div class="uploadBox" v-for="(value, key) in imgs" :key="'uploadBox' + key">
            <img :src="getObjectURL(value)" alt="" class="uploadImg">
            <img src="../../assets/images/icon_x.png" alt="" class="closeImg" @click='delImg(key)'>
          </div>
          <div class="inputButton">
          <img src="../../assets/images/icon_photo.png" alt="" class="addImg">
            <input type="file" class="upload" @change="addImg" ref="inputer" multiple
              accept="image/*"/>
          </div>
          <div class="submitTask" @click="submit">
            上传图片
          </div>
        </div>
      </div>
    </template>

    js:

    export default ({
      name: 'uploadPicture',
      data: function() {
        return {
          formData: new FormData(),
          imgs: {},
          imgLen: 0,
          txtVal: 0,
          desc: ''
    
        }
      },
      created() {
    
      },
      methods: {
        descInput() {
          // this.txtVal = this.desc.length;
        },
        addImg(event) {
          let inputDOM = this.$refs.inputer
          // 通过DOM取文件数据
          this.fil = inputDOM.files
          // console.log(inputDOM.files)
          let oldLen = this.imgLen
          for (let i = 0; i < this.fil.length; i++) {
            let size = Math.floor(this.fil[i].size / 1024)
            if (size > 5 * 1024 * 1024) {
              alert('请选择5M以内的图片!')
              return false
            }
            this.imgLen++
            this.$set(this.imgs, this.fil[i].name + '?' + new Date().getTime() + i, this.fil[i])
            // console.log(this.imgs)
          }
          console.log('this.fil', this.fil)
          // this.imgs = this.fil
        },
        getObjectURL(file) {
          var url = null
          if (window.createObjectURL !== undefined) { // basic
            url = window.createObjectURL(file)
          } else if (window.URL !== undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file)
          } else if (window.webkitURL !== undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file)
          }
          return url
        },
        delImg(key) {
          this.$delete(this.imgs, key)
          this.imgLen--
        },
        // 提交上传图片
        submit() {
          for (let key in this.imgs) {
            let name = key.split('?')[0]
            this.formData.append('file', this.imgs[key])
          }
          this.formData.getAll('file')
          console.log('this.formData', this.formData)
          this.$refund.upload(this.formData)
        }
      }
    })
    </script>

    说明:

        图片上传完成后,使用getObjectURL来作预览功能处理。

    温馨提示: 

    formData.getAll最后返回来的是一个数组

    样式:

    <style lang="less">
    // 外部盒子样式
    .content {
       100%;
      padding: 0.16rem 0 !important;
      .imgBox {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
      }
    }
    
    // 预览图片样式
    .uploadBox {
      position: relative;
       30%;
      text-align: left;
      margin-right: 0.1rem;
      margin-bottom: 0.05rem;
      // 预览样式
      .uploadImg {
         100%;
        height: 100%;
        display: block;
        overflow: hidden;
      }
      // 删除按钮
      .closeImg {
         0.2rem;
        height: 0.2rem;
        position: absolute;
        top: 2%;
        right: 1%;
      }
    }
    // 上图图片icon
    .inputButton {
      position: relative;
      display: block;
       1.2rem;
      height: 1.2rem;
      // 上传图片样式
      .addImg {
        display: block;
         1.2rem;
        height: 1.2rem;
      }
      // input样式
      .upload {
         1.2rem;
        height: 1.2rem;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
      }
    }
    // 提交按钮
    .submitTask {
        margin: auto;
        background: #EF504D;
         30%;
        height: 0.3rem;
        color: #fff;
        font-size: 0.16rem;
        line-height: 0.3rem;
        text-align: center;
        border-radius: 0.1rem;
        margin-top: 0.8rem;
    }
    </style>

    欢迎关注公众号,进一步技术交流:

  • 相关阅读:
    shell命令finger
    join命令
    日志记录
    shell命令xargs
    linux read 简介
    P1601 A+B Problem(高精)
    P2670 [NOIP2015 普及组] 扫雷游戏
    P1042 [NOIP2003 普及组] 乒乓球
    P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布
    P5744 【深基7.习9】培训
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/11833930.html
Copyright © 2011-2022 走看看