js

input[type="file"]上传文件

2021-07-21  本文已影响0人  好多柱
 <!-- 使用 accept 属性可以限定 文件选择的格式 -->
 <a class='uploadbtn'>
       <img src="../../../../assets/content_icon/upload.png" alt="">
        <input type="file"  @change="fileChange" 
        accept="application/*, image/*" ref='upload' /></a>

上传文件的事件

      fileChange () {
     // 通过this.$refs获取或者通过dom获取文件
     // this.file  = document.querySelector('input[type=file]').files[0];
        this.file = this.$refs.upload.files[0]
        // 校验图片
        this.$refs.upload.value = ''
        if(this.file.size/1024 > 2048){
          this.$Notice.warning({title:'该图片超过了2MB!'})
          return
        }
        if(!this.file.type || this.file.type && !'image/jpg,image/jpeg,image/png,image/svg,image/svg+xml,image/webp,image/gif,'.includes(this.file.type)){
          this.$Notice.warning({title:'图片格式不正确!'})
          this.file = ''
          return
        }
        let base64_img = new FileReader()
        base64_img.readAsDataURL(this.file)
        base64_img.onload = async e =>{ //e.target.result属性将包含一个`data:`URL格式的字符串(base64编码)以表示所读取文件的内容

          this.modelConfig.addRow.icon = await this.uploadFile({file_name:this.file.name,file:e.target.result})
        }
      }, 
  //上传到服务器返回一个图片地址
      uploadFile(params){
        return this.$httpRequestEntrance.httpRequestEntrance('POST', '/v1/medias',params, (res) => {
          return res.path
        })
      },
上一篇下一篇

猜你喜欢

热点阅读