vue上传图片

• Z时代
• 2024-01-10
• 分类：综合

在用这块代码前需要在主页面index引入<script src="http://at.alicdn.com/t/font_kfbh2nlnqrrudi.js"></script>

html:

这里需要引入：import EXIF from 'exif-js'  Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展

   <div v-if="question.question_type==5" class="finnalPicture">{{p_index+1}}.{{question.question_title}}<span style="color:red;" v-show="question.required==true">*</span></div>
      <div v-if="question.question_type==5" class="addQuestion">
          <div class="editArea">
            <li v-for="item in imgObj[p_index]" class="imgItem" :style="{backgroundImage: 'url(' + item + ')' }" @click="deleteImg(item,p_index)"></li>
            <div class="addImg">
              <div class="addImgBtn">
                  +
                <input type="file" @change="onFileChange($event,question.question_id,p_index)">
              </div>
            </div>
          </div>
      </div>

js:

data里面需要定义imgObj: {},

onFileChange (e, id, index) {
      Indicator.open()
      var files = e.target.files || e.dataTransfer.files
      if (!files.length) {
        return
      }
      this.createImage(files[0], id, index)
    },
    createImage (file, id, index) {
      let orientation = 1
      EXIF.getData(file, function () {
        orientation = EXIF.getTag(file, 'Orientation')
      })
      var reader = new FileReader()
      reader.onload = (e) => {
        let result = e.target.result
        this.compress(result, orientation, (data) => {
          let obj = {}
          obj.imgpath = data
          obj.expert_consult_order_id = this.orderId
          this.imgObj[index].push(data)
          let imgStr = {
            question_id: id,
            question_value: this.imgObj[index]
          }
          this.submitArray[index] = imgStr
          let effectimg = {question_id: id, question_value: this.imgList}
          this.submitQuestion[index] = effectimg
          Indicator.close()
        })
      }
      reader.readAsDataURL(file)
    },
    compress (img, orientation, next) {
      let image = new Image()
      image.onload = function () {
        let degree = 0
        let width = image.naturalWidth
        let height = image.naturalHeight
        let maxSide = Math.max(width, height)
        let minSide = Math.min(width, height)
        if (maxSide > 1024) {
          minSide = minSide / maxSide * 1024
          maxSide = 1024
          if (width > height) {
            width = maxSide
            height = minSide
          } else {
            width = minSide
            height = maxSide
          }
        }
        let canvas = document.createElement('canvas')
        let cxt = canvas.getContext('2d')
        canvas.width = width
        canvas.height = height
        cxt.fillstyle = '#fff'
        if (orientation !== '' && orientation !== 1) {
          switch (orientation) {
            case 3 :
              degree = 180
              width = -width
              height = -height
              break
            case 6 :
              canvas.width = height
              canvas.height = width
              degree = 90
              height = -height
              break
            case 8 :
              canvas.width = height
              canvas.height = width
              degree = 270
              width = -width
              break
          }
        }
        cxt.rotate(degree * Math.PI / 180)
        cxt.drawImage(image, 0, 0, width, height)
        next(canvas.toDataURL('image/jpeg', 0.8))
      }
      image.src = img
    },
    deleteImg (item, pindex) {
      MessageBox.confirm('您想删除这张图片吗？').then(action => {
        let index = this.imgObj[pindex].indexOf(item)
        this.imgObj[pindex].splice(index, 1)
      })
    }

css:

.finnalPicture{
   color: #000000;
   font-size: torem(14px);
 }

.editArea{
    background-color: #ffffff;
    padding: torem(15px);
    display: flex;
    flex-flow: row wrap;
    .question{
      box-sizing: border-box;
      display: block;
      width: 100%;
      font-size: torem(14px);
      line-height: torem(20px);
      padding: torem(5px) torem(15px);
      @include border(all);
      border-radius: torem(5px);
    }
    .imgItem{
      display: inline-block;
      height: torem(60px);
      width: torem(60px);
      background-size: 100% 100%;
      margin: 0 torem(10px) torem(10px) 0;
    }
    .addImg{
      line-height: torem(60px);
      .addImgBtn{
        display: inline-block;
        height: torem(60px);
        width: torem(60px);
        position: relative;
        border: 1px dashed #dddddd;
        color: #dddddd;
        text-align: center;
        font-size: torem(30px);
        input{
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          opacity: 0;
        }
      }
      span{
        padding: 0 torem(15px);
        font-size: torem(14px);
        color: #999;
      }
    }
  }

以上是 vue上传图片 的全部内容， 来源链接： utcz.com/z/377860.html