vue + image-conversion + element-ui 图片压缩

 import compress from '@/utils/compress'

import imgSize from '@/utils/imgSize


import * as imageConversion from 'image-conversion'export default async function(file, size) {  let blob = null  await imageConversion.compressAccurately(file, size).then(res => {    console.log(file, 'file')    console.log(res, 'res')    blob = res  })  const resAuatarFile = new window.File([blob], file.name, { type: file.type })  console.log(resAuatarFile, 'resAuatarFile')  return resAuatarFile}


import { Message } from 'element-ui'export default function(file) {  return new Promise((resolve, reject) => {    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'    const isLt2M = file.size / 1024 / 1024 < 2    console.log(isJpgOrPng, 'isJpgOrPng')    console.log(isLt2M, 'isLt2M')    if (!isJpgOrPng) {      reject(        Message({          message: '上传图片只能是JPG或PNG 格式',          type: 'error'        })      )    }    if (!isLt2M) {      reject(        Message({          message: '上传头像图片大小不能超过2MB!',          type: 'error'        })      )    }    resolve()  })}

    async handleUpload(data) {

      const file = data.file

   // 原来的

      const form = new FormData()

      form.append('file', file)

      File.upload(form)

        .then(response => {

          console.log(response)

          this.file = response.data

        })

        .catch(error => {

          console.error(error)

        })

    },

      // demo如果图片不转base64

      // imgSize(file).then(() => {

      //   compress(file, 100).then((res) => {

      //     const form = new FormData()

      //     form.set('file', res)

      //     File.upload(form)

      //       .then(response => {

      //         console.log(response)

      //         this.file = response.data

      //       })

      //       .catch(error => {

      //         console.error(error)

      //       })

      //   })

      // }).catch(() => {})

      // demo如果图片转base64

      // imgSize(file).then(() => {

      //   compress(file, 100).then((res) => {

      //     const reader = new FileReader()

      //     reader.readAsDataURL(res)

      //     reader.onload = (e) => {

      //       console.log(e)

      //       // 读取到的图片base64 数据编码 在此编码字符串传给后台即可

      //       let param = {

      //         base64:e.target.result

      //       }

      //       // 以下上传

      //       接口.(param)

      //     }

      //     console.log(ocrImgStr)

      //     const form = new FormData()

      //     form.set('file', res)

      //     File.upload(form)

      //       .then(response => {

      //         console.log(response)

      //         this.file = response.data

      //       })

      //       .catch(error => {

      //         console.error(error)

      //       })

      //   })

      // }).catch(() => {})

compress.js

import * as imageConversion from 'image-conversion'

export default async function (file,size){

  let blob = null

  await imageConversion.compressAccurately(file, size).then(res => {

    blob = res

  })

  const resAvatarFile = new window.File(

    [blob],

    file.name,

    { type: file.type }

  )

  return resAvatarFile

}

imgSize.js

import { Message } from 'element-ui'

export default function (file) {

  return new Promise((resolve, reject) => {

    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'

    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isJpgOrPng) {

      reject(

        Message({

          message: '上传图片只能是 JPG 或 PNG 格式',

          type: 'error'

        })

      )

    }

    if (!isLt2M) {

      reject(

        Message({

          message: '上传头像图片大小不能超过 2MB!',

          type: 'error'

        })

      )

    }

    resolve()

  })

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容