基于vue+axios+lrz.js微信端图片压缩上传方法

为方便理解，本文将按照以下步骤来讲解基于vue+axios+lrz.js微信端图片压缩上传方法的完整攻略：

1. 安装必要的依赖包
2. 编写HTML结构和样式
3. 编写Vue组件的代码
4. 使用axios发送网络请求
5. 使用lrz.js进行图片压缩
6. 完成图片上传功能

下面，我们将对这6个步骤逐一进行讲解：

1. 安装必要的依赖包

首先，我们需要在项目根目录下使用npm安装需要的依赖包：

npm install --save vue axios lrz

其中，vue是用来构建前端界面的框架，axios是用来发送网络请求的工具，lrz是用来进行图片压缩的工具。

2. 编写HTML结构和样式

为了方便演示，我们这里使用简单的HTML结构和样式，代码如下：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <img :src="imageUrl" class="preview">
  </div>
</template>

<style>
.preview {
  max-width: 300px;
  max-height: 300px;
}
</style>

这里我们使用了一个input标签来选择要上传的图片，同时使用了一个img标签来预览图片。

3. 编写Vue组件的代码

接下来，我们可以编写Vue组件的代码了。我们在组件中首先需要处理文件选择事件，将文件转换成Base64格式的字符串进行显示。同时，我们还需要添加一个“上传”按钮，用来触发图片上传功能。完整代码如下：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <img :src="imageUrl" class="preview">
    <button @click="handleUpload">上传</button>
  </div>
</template>

<script>
import axios from 'axios'
import lrz from 'lrz'

export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0]
      lrz(file).then((res) => {
        this.imageUrl = res.base64
      })
    },
    handleUpload() {
      const formData = new FormData()
      formData.append('file', this.dataURItoBlob(this.imageUrl))
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    })
  },
  computed: {
    dataURItoBlob() {
      return (dataURI) => {
        const byteString = atob(dataURI.split(',')[1])
        const ab = new ArrayBuffer(byteString.length)
        const ia = new Uint8Array(ab)
        for (let i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i)
        }
        return new Blob([ab], { type: 'image/png' })
    }
  }
}
</script>

这里我们通过handleFileChange方法，将图片转换为base64格式的字符串，然后将其赋值给imageUrl属性，以便在页面中进行预览。同时，我们通过handleUpload方法，将imageUrl属性中的图片上传到服务器中。

4. 使用axios发送网络请求

在handleUpload方法中，我们使用了axios来发送网络请求。在发送请求时，我们需要将数据以FormData的形式进行发送，同时还需要设置请求头Content-Type为multipart/form-data。完整代码如下：

handleUpload() {
  const formData = new FormData()
  formData.append('file', this.dataURItoBlob(this.imageUrl))
  axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

5. 使用lrz.js进行图片压缩

为了避免上传大图片造成的性能问题，我们可以使用lrz.js进行图片压缩。在handleFileChange方法中，我们可以对上传的图片进行压缩，代码如下：

handleFileChange(e) {
  const file = e.target.files[0]
  lrz(file).then((res) => {
    this.imageUrl = res.base64
  })
}

这里我们将文件对象(file)传递给lrz方法进行压缩，压缩后的结果是一个Promise对象。在Promise对象的回调函数中，我们可以获得压缩后的图片数据，包括base64格式和blob格式，可以根据需要进行使用。

6. 完成图片上传功能

在handleUpload方法中，我们使用axios发送了一个POST请求，并将数据以FormData的形式进行发送。由于图片上传是一个异步的过程，我们可以通过axios的then方法来处理上传成功后的逻辑。完整代码如下：

handleUpload() {
  const formData = new FormData()
  formData.append('file', this.dataURItoBlob(this.imageUrl))
  axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then((res) => {
    //上传成功后的处理逻辑
  })
}

以上就是基于Vue+axios+lrz.js微信端图片压缩上传的完整攻略。在实际应用中，可以根据具体的需求进行适当的修改和优化。