美文网首页js
input[type="file"]上传文件

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

作者: 好多柱 | 来源:发表于2021-07-21 11:20 被阅读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
            })
          },
    

    相关文章

      网友评论

        本文标题:input[type="file"]上传文件

        本文链接:https://www.haomeiwen.com/subject/mdqjmltx.html