sha var share 圖片 sub nsf 圖片格式 reader subst

效果

視圖層

<el-form-item class="file-box" label="微信分享圖片url鏈接" prop="wx_share_img_url"> <input ref="shareFile" class="file-item wx-file-item" type="file" @change="changeImg" > <div class="el-input__inner"> {{ form.wx_share_img_url }} <el-button size="small" type="primary">點擊上傳</el-button> </div> </el-form-item> <el-form-item class="file-box" label="額外參數（目前用於app活動頁圖片地）" prop="extra"> <input ref="extraFile" class="file-item" type="file" @change="changeImg" > <div class="el-input__inner"> {{ form.extra }} <el-button size="small" type="primary">點擊上傳</el-button> </div> <!-- <img ref="imgzs" src="" > --> </el-form-item>

method

    // 上傳圖片
    changeImg(e) {
      console.log(e, ‘1111‘)
      var that = this
      var file = e.target.files[0] || e.dataTransfer.files[0]
      var fileSize = file.size || file.fileSize
      var fileName = file.name
      var len = e.target.classList.length
      console.log(file.size, ‘2111‘)
      
 
if (file.name.lastIndexOf(‘.‘) === -1) {
        this.$message.info(‘路徑不正確‘)
        return false
      }
      var AllImgExt = ‘.jpg|.jpeg|.gif|.bmp|.png|.swf‘
      var extName = file.name.substring(file.name.lastIndexOf(‘.‘)).toLowerCase()
      if (AllImgExt.indexOf(extName + ‘|‘) === -1) {
        
 
this.$message.info(‘非法圖片格式‘)
        return false
      }
      if (fileSize < 3145728) {
        if (window.FileReader) {
          var reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = (e) => {
            console.log(e.target + ‘img‘)
            console.log(e.target.result + ‘img‘)
            // that.$refs.imgzs.src = e.target.result
            if (len > 1) {
              that.form.wx_share_img_url = fileName
              that.formData.set(‘share_img‘, file)
              console.log(file, ‘share_img‘)
              // that.formData.set(‘share_img‘, e.target.result)
            } else {
              console.log(file, ‘list_img‘)
              that.form.extra = fileName
              that.formData.set(‘list_img‘, file)
            }
            $(‘#imgshow‘).get(0).src = e.target.result;
            that.isUploadImg = true
          }
        }
      } else {
        this.$message.info(‘圖片大小超過限制‘)
        return false
      }
    }

註意：多個文件上傳圖片時使用class的長度進行判斷

使用new FileReader()對象是為了實現圖片預覽功能

，如果需要傳圖片的路徑給後端是用 e.target.result 讀取，這個讀取出來的值是base64位可以直接在頁面上渲染預覽圖片，如果是後端需要原生的值就是傳

e.target.files[0] || e.dataTransfer.files[0]  具體見後臺活動列表編輯

vue中原生file上傳圖片