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

最新推荐文章于 2025-06-29 09:06:23 发布

Topepy

最新推荐文章于 2025-06-29 09:06:23 发布

阅读量6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue Javascript 文章标签： vue-resource表单提交 file图片的压缩 window.atob window.btob 图片压缩上传

本文链接：https://blog.youkuaiyun.com/u013084331/article/details/77943042

Javascript 同时被 2 个专栏收录

22 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文介绍了Vue项目中实现图片上传及压缩的方法。首先通过FormData处理文件并利用Vue-resource完成表单提交，接着讲解了如何使用JavaScript的base64编码与解码功能压缩图片，最后推荐了一个Vue插件用于进一步减小图片体积。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

①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 来把上传的图片压缩传送门

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