上传图片与二进制数据

<input type="file" accept="image/*" style="display:none" ref="inputRef" @change="onInputChange">

accept="image/*"表示上传的图片可以是任何格式.

将图片转换为base64格式上传

    onInputChange(e){
           // console.log(e.target)  //input 的value的属性是鼠标点击文件所在的地址 C:\\fakepath\\01.jpg
           //console.log(e.target.files) //打印的是一个 FileList 对象 ,里面携带着length:1 和对象file
           //存在length.说明是可以用数组方法选中文件
           //file是一个对象,里面包含着上传的时间 lastModified:1650989198165 ,name, size ,type(类型格式)
           //由于携带文件length不为0,则可以做出判断,防止上传空文件导致报错,可以做如下判断
           
       if(e.target.files.length===0) return
       
           //文件上传需要根据文档确定格式 ,例如将图片转换成base64上传
       const reader = new FilesReader()  //new一个构造函数
       
           //readAsDataURL()是实例reader中的一个方法
       reader.readAsDataURL(e.target.files[0]) 
       
           //readAsDataURL可以根据地址文件进行转换(base64)操作
           //readAsDataURL()会返回一个结果,用result接收,实例reader.result可以查看结果
           
       reader.onload=()=>{
           //console.log(reader.result) //很长的一串字符,此时以转为base64 格式了
           this.img = reader.result
       }
    }

将图片转成二进制

<el-form-item label="封面图片">
<img src="" ref="imgRef">
  <input  type="file" style="display: none" accept="image/*" ref="iptFile"  @change="onCoverChange" />
    <!-- 选择封面按钮 -->
    <el-button type="text" @click="chooseImg">选择图片</el-button>  
</el-form-item>


Form :{             
        cover_img: null   //图片初始值为null
      }
   

点击选择图片按钮 , 触发文件上传按钮

chooseImg(){
    this.$refs.iptFile.click()  //点击选择图片调用chooseImg , 触发iptFile发生状态改变,触发change事件
},

onCoverChange(e){
     const files = e.target.files
     if(e.target.files.length===0) return
     this.cover_img = files[0] //将图片信息
     const url = URL.createObjectURL(files[0])    //浏览器属性,便于实时查看上传
     this.$refs.imgRef.src = url    //
}

到这里的还是与之前的一样,变量保存的是图片信息

设置一个上传按钮 <button @click=UpDataImg>上传图片</button>

点击上传将文件发送到服务器

UpDataImg(){
    const  UpFprm = new FormData()
    //将数据转换为二进制
    UpFprm.append(cover_img,this.Form.cover_img) 
    //发送ajax到服务器
     const { data: res } = this.axios.post('/my/article/add', UpFprm)
     if(res.code === 0) {
         this.$message.success('发布成功！')
     }else{
         this.$message.error('发布失败！')
     }
    
}