vue图片上传,预览,压缩组件

代码还在优化,后续会进行更新,该组件引用了element-ui的弹出框样式,使用axios库进行ajax请求,向后台发送的参数是formData对象,如果需要的base64可不转formData对象,直接将压缩过后的base64发给后台

该组件上传图片的大致思路:
  1. 利用H5的FileReader对象将上传的图片转成base64格式
  2. 利用canvas的drawImage方法重绘上传的图片(注:drawimage是一个异步方法,需要在图片读取成功后在进行重绘,否则可能会压缩不成功)
  3. 在利用canvas的toDataURL方法将图片压缩
  4. 在将压缩后的base64编码图片转成blob对象
  5. 创建一个formData对象,将blob对象append进去
  6. 图片上传时需设置请求为 { "Content-Type": "multipart/form-data" }
  7. 将formData对象上传到后台

html部分

  

JS代码


                    
                    

你可能感兴趣的:(vue图片上传,预览,压缩组件)