处理base64格式图片和FormData格式的图片

最新推荐文章于 2024-03-06 14:09:13 发布

myazwj

最新推荐文章于 2024-03-06 14:09:13 发布

阅读量1k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/myazwj/article/details/121279465

版权

本文介绍了如何在JavaScript前端开发中处理Base64格式和FormData格式的图片。第一部分讲解了利用FileReader API处理Base64格式图片的代码片段，第二部分则展示了使用FormData对象处理图片的相关代码。

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

一.处理base64格式

这个是截取的做项目的代码片段

这个是使用new FileReader()

// 2.然后触发里面的change事件，内容发生改变的时候触发
    onFileChange (e) {
      // 然后我们要获取里面的图片的路径值
      const files = e.target.files[0]
      console.log(e, 111)
      // 这个时候要给判断，如果没有选择的话将图片默认显示和将图片禁用
      // 下面是文件大小的限制，还有选择图片后头像上传打开，最后把选择的图片赋值给图片
      if (files.size / 1024 / 1024 > 1.5) return this.$message.warning('图像大小不能超过1.5M')
      // 3. 处理base64格式图片 回显
      //  3.1 使用fileReader文件读取对象 处理base64格式
      if (files) {
        var fr = new FileReader() //   研究对象就是研究三要素：属性+方法+回调函数
        //  使用readAsDataURL方法读取文件   读取file文件
        fr.readAsDataURL(files)
        //  监听什么时候读取完毕
        // fr.addEventListener('load')
        fr.onload = () => {
          //  读取完毕后获取读取的结果
          console.log(1111222, this)
          this.userImg = fr.result // 将图片上展示出来
          this.isDisabled = false
        }
      }
      console.log(files, '图片')
    },

二. FormData格式的图片

这个是截取的做项目的代码片段

使用 new FormData()

// 由于此接口涉及到文件上传的功能，因此提交的请求体，必须是 FormData 格式！
        const fm = new FormData()
        fm.append('title', this.pubForm.title)
        fm.append('cate_id', this.pubForm.cate_id)
        fm.append('content', this.pubForm.content)
        fm.append('state', this.pubForm.state)
        // cover_img要的是一个文件对象
        fm.append('cover_img', this.file)
        const { data } = await reqPublishArticle(fm)