Vue 图片压缩并上传至服务器功能

下面是 Vue 图片压缩并上传至服务器的完整攻略。

1. 安装必要的库和工具

在使用 Vue 图片压缩并上传至服务器功能之前，需要确保已经安装以下必要的库和工具：

• vue: Vue.js 框架
• axios: HTTP 请求库
• compressorjs: 图片压缩库，用来将图片压缩至指定的大小
• qs: Querystring 库，用来序列化表单数据
• multer: Node.js 中的文件上传中间件，用来接收由前端发送的上传文件

你可以使用以下命令来安装这些库和工具：

npm install vue axios compressorjs qs multer

2. 编写 Vue 组件

首先，在 Vue 组件中，我们需要在模板中添加一个文件上传表单，用来选择图片文件并上传。

<template>
  <div>
    <form @submit.prevent="uploadImage">
      <input type="file" ref="fileInput" @change="handleFileChange">
      <button type="submit">上传图片</button>
    </form>
  </div>
</template>

其中，我们需要给文件输入框添加 ref="fileInput" 属性，以便在上传表单提交时获取文件对象。此外，我们还需要添加一个上传按钮，并绑定 @submit.prevent="uploadImage" 事件，以便在点击提交按钮时触发上传图片的功能。

接下来，在 Vue 组件中定义 handleFileChange 方法，用来获取选择的图片文件并压缩图片。

<script>
import Compressor from 'compressorjs'

export default {
  data () {
    return {
      file: null
    }
  },
  methods: {
    handleFileChange (event) {
      const file = event.target.files[0]
      new Compressor(file, {
        quality: 0.6,
        success: compressedFile => {
          this.file = compressedFile
        }
      })
    },
    uploadImage () {
      const formData = new FormData()
      formData.append('image', this.file)
      axios.post('/api/upload', formData).then(response => {
        console.log(response.data)
      })
    }
  }
}
</script>

在 handleFileChange 方法中，我们首先使用 event.target.files[0] 获取用户选择的文件对象，并使用 compressorjs 库将图片文件压缩至指定的大小（这里以 60% 的质量压缩图片），然后将压缩后的文件保存到 Vue 组件的 file 数据中。

在 uploadImage 方法中，我们将压缩后的图片文件封装为一个 FormData 对象，并使用 Axios 库发送 POST 请求，将图片上传至服务器。

3. 服务器端处理

最后，我们需要在服务器端处理文件上传请求，并将图片保存到指定的位置。我们可以使用 Node.js 的 multer 中间件来接收并处理前端发送的文件数据。

const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

app.post('/api/upload', upload.single('image'), (req, res) => {
  console.log(req.file)
  res.send({
    success: true,
    url: `/uploads/${req.file.filename}`
  })
})

在上述代码中，我们首先使用 multer 中间件初始化一个文件上传的配置，将上传的文件保存至指定的目录中（这里为 uploads/ 目录）。然后，使用 POST 请求接收前端发送的 data 数据，使用 upload.single('image') 中间件将上传的文件数据解析为 req.file 对象，通过 req.file.filename 获取并保存图片文件名。

最后，我们向前端发送一个 JSON 响应，包含图片上传成功的标志位 success 和图片的访问 URL url。

示例说明

下面我们通过两个示例来展示 Vue 图片压缩并上传至服务器功能的完整攻略。

示例一：上传单个图片

在这个示例中，我们向 Vue 组件中添加一个上传单个图片的功能。用户可以选择本地图片文件并将其上传至服务器。

<template>
  <div>
    <form @submit.prevent="uploadImage">
      <input type="file" ref="fileInput" @change="handleFileChange">
      <button type="submit">上传图片</button>
    </form>
  </div>
</template>

<script>
import Compressor from 'compressorjs'

export default {
  data () {
    return {
      file: null
    }
  },
  methods: {
    handleFileChange (event) {
      const file = event.target.files[0]
      new Compressor(file, {
        quality: 0.6,
        success: compressedFile => {
          this.file = compressedFile
        }
      })
    },
    uploadImage () {
      const formData = new FormData()
      formData.append('image', this.file)
      axios.post('/api/upload', formData).then(response => {
        console.log(response.data)
      })
    }
  }
}
</script>

在 Vue 组件中，我们首先添加了一个上传表单，用户可以选择本地的图片文件并点击上传按钮。在前端提交表单时，我们通过 axios.post('/api/upload', formData) 发送 POST 请求至服务器端，将图片文件上传到指定目录。

在服务器端处理过程中，我们使用 multer 中间件处理前端发送的上传数据，并将文件保存至指定的目录。最后我们向前端响应一个消息，告知图片上传成功。

示例二：上传多个图片

在这个示例中，我们添加一个上传多个图片的功能。用户可以选择多张本地图片文件，并将这些文件一次性上传至服务器。

<template>
  <div>
    <form @submit.prevent="uploadImage">
      <input type="file" ref="fileInput" multiple @change="handleFileChange">
      <button type="submit">上传图片</button>
    </form>
  </div>
</template>

<script>
import Compressor from 'compressorjs'

export default {
  data () {
    return {
      files: []
    }
  },
  methods: {
    handleFileChange (event) {
      const files = event.target.files
      const compressOptions = {
        quality: 0.6,
        success: compressedFile => {
          this.files.push(compressedFile)
        }
      }
      for (let i = 0; i < files.length; i++) {
        new Compressor(files[i], compressOptions)
      }
    },
    uploadImage () {
      const formData = new FormData()
      for (let i = 0; i < this.files.length; i++) {
        formData.append('image[]', this.files[i])
      }
      axios.post('/api/upload', formData).then(response => {
        console.log(response.data)
      })
    }
  }
}
</script>

在 Vue 组件中，我们首先添加了一个上传表单，并给文件输入框加上 multiple 属性，允许用户选择多张图片文件并一次性提交至服务器。在用户选择本地图片文件后，在前端使用 compressorjs 库将每张图片逐一压缩并添加到 Vue 组件数据的 files 数组中。在上传表单提交时，我们遍历 files 数组，并将每张图片文件封装为一个 FormData 对象，使用 formData.append('image[]', this.files[i]) 添加至 FormData 中。最后，使用 axios.post('/api/upload', formData) 将 FormData 发送至服务器端储存。

在服务器端处理过程中，我们同样需要配置 multer 中间件，以便处理前端发送的多个文件数据。在获取到上传的多个文件后，我们可以给每张图片文件随机命名，并将这些文件存储至指定目录中。最后我们向前端响应一个消息，告知图片上传成功。

以上就是 Vue 图片压缩并上传至服务器功能的完整攻略。希望可以对你有所帮助。