Vue-resource如何实现表单提交以及file图片上传的压缩

总括:个人在项目开发中所遇到的问题总结,主要介绍两个知识点:

①vue-resource如何实现表单提交。

②file图片上传如何压缩,减少上传压力


vue中的代码

let that = this
      // 上传图片获取url
      console.log('没处理时的大小:' + this.headerImage100.length)
      this.$server.uploadHeader(this.headerImage100, (data) => {
        that.produceImg = data.url
        if (that.produceImg) {
          that.putHeader()
          // 将图片SRC传递给父组件
          that.$emit('changeImg', that.produceImg)
        }
      }, res => {
        that.errhandle(res.body)
      })

server中的代码

  /**
   * 上传头像
   * @param file
   * @param cb
   * @param err
   * Server.path.apiCS + 'image'
   */
  uploadHeader (file, cb, err) {
    function dataURLtoBlob (dataurl) {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = window.atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new window.Blob([u8arr], {type: mime})
    }
    console.log('处理后的大小:' + dataURLtoBlob(file).size)
    let uploadData = new window.FormData()
    uploadData.append('upfile', dataURLtoBlob(file), 'image.png')
    uploadData.append('owner', window.sessionStorage.userId || 111)
    uploadData.append('group', 'protal')
    uploadData.append('chmod', '777')
    uploadData.append('enterpriseId', 1)

    this.$http.post(Server.path.apiCS + 'image', uploadData).then((res) => {
      cb(res.data)
    }, this.error(err))
  }

运行效果如下:


一、vue-resource如何实现表单提交

let uploadData = new window.FormData()
    uploadData.append('upfile', dataURLtoBlob(file), 'image.png')
通过使用window.FormData进行数据的处理
this.$http.post(Server.path.apiCS + 'image', uploadData).then((res) => {
更多详情,可参考: 传送门

二、file的压缩

知识储备:window.atob()和window.btob(),简而言之就是JavaScript中base64的解码与编码

举个栗子方便了解:

var str = 'javascript';

window.btoa(str)
//转码结果 "amF2YXNjcmlwdA=="

window.atob("amF2YXNjcmlwdA==")
//解码结果 "javascript"
需要注意:对于转码来说,Base64转码的对象只能是字符串,因此来说,对于其他数据还有这一定的局限性,在此特别需要注意的是对Unicode转码。


很明显,这种方式是不行的,那么如何让他支持汉字呢,这就要使用window.encodeURIComponent和window.decodeURIComponent

var str = "China,中国";

window.btoa(window.encodeURIComponent(str))
//"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="

window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))
//"China,中国"
具体API注意事项 传送门 中间值得一提的是:
atob() 也适用于用JavaScript实现的XPCOM组件, 尽管在组件里面 window 不再是全局对象

推荐一个比较详细的友情链接:http://www.cnblogs.com/liuxianan/p/js-image-compress.html

最后,如果有同学还不满意,还需要压缩更小。

可以还可以使用vue插件 j-i-c 来把上传的图片压缩  传送门

最后的最后,有个很棒的前端压缩图片博客  传送门





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值