Vue移动端实现图片上传及超过1M压缩上传

OK，下面是“Vue移动端实现图片上传及超过1M压缩上传”的完整攻略：

1. 前置知识

在讲解具体实现过程之前，需要了解以下知识点：

input 标签的 type="file" 属性: 用于创建一个文件上传框，用于选择本地文件上传。当选择文件后，选择框会为文件生成一个 File 对象，用于后续操作。
canvas 标签和 canvas API: 用于在网页中动态绘制图片。在实现图片的压缩和处理时，需要使用 Canvas 进行相关操作。

2. 实现过程

下面详细讲解如何使用 Vue 实现移动端图片上传并超过 1M 压缩上传：

2.1 实现图片上传

在 Vue 中，我们可以使用 element-ui 的 el-upload 组件实现图片上传。具体实现步骤如下：

使用 el-upload 组件进行布局渲染，设置属性 :action、:before-upload、:on-success 分别对应上传地址、上传前处理、上传成功处理。
在 before-upload 钩子中获取要上传的文件，然后将文件存储到数据中，以便在上传成功之后进行操作。

例如，以下是一个简单实现图片上传的示例代码：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :limit="1"
    :show-file-list="false">
    <div class="upload-box">
      <i class="el-icon-plus"></i>
    </div>
  </el-upload>
</template>

<script>
  export default {
    name: 'UploadDemo',
    data() {
      return {
        fileFormData: null,
      }
    },
    computed: {
      uploadUrl() {
        return 'https://your-upload-api-url'
      },
    },
    methods: {
      beforeUpload(file) {
        this.fileFormData = new FormData()
        this.fileFormData.append('file', file)
      },
      handleSuccess(response) {
        console.log('上传成功！')
      },
    },
  }
</script>

2.2 实现图片压缩

上面完成了图片的上传处理，但是上传大图片可能耗费较长时间，因此我们需要在上传之前对图片进行压缩。下面介绍如何使用 Canvas 对图片进行压缩处理。

在 before-upload 钩子中，获取文件对象，然后利用 FileReader 的 API 将文件对象转化为 base64 编码的字符串。
然后创建一个 Image 对象，并将文件解码为该 Image 对象的 src 属性。
创建一个 canvas 对象，设置宽高和图片的对应宽高一致，然后使用 canvas 对象的 drawImage 方法将 Image 实例绘制在 canvas 对象上。
使用 canvas 对象对图片进行压缩处理，然后将处理后的图片转化为 Blob 对象，以便进行上传处理。

例如，以下是一个简单实现图片压缩上传的示例代码：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :limit="1"
    :show-file-list="false">
    <div class="upload-box">
      <i class="el-icon-plus"></i>
    </div>
  </el-upload>
</template>

<script>
  export default {
    name: 'UploadDemo',
    data() {
      return {
        fileFormData: null,
      }
    },
    computed: {
      uploadUrl() {
        return 'https://your-upload-api-url'
      },
    },
    methods: {
      beforeUpload(file) {
        // 创建 FileReader 对象
        const reader = new FileReader()
        reader.readAsDataURL(file) // 将文件对象转换据base64字符串
        // 读取文件成功
        reader.onload = () => {
          // 创建 Image 对象，用于绘制图片
          const img = new Image()
          img.src = reader.result
          // 图片加载完毕后，进行压缩处理
          img.onload = () => {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            // 设置 canvas 宽高和文件宽高一致
            canvas.width = img.width
            canvas.height = img.height
            // 绘制图片到 canvas 中
            ctx.drawImage(img, 0, 0, img.width, img.height)
            // 将 canvas 转换为 Blob 对象
            canvas.toBlob((blob) => {
              this.fileFormData = new FormData()
              this.fileFormData.append('file', blob)
            })
          }
        }
      },
      handleSuccess(response) {
        console.log('上传成功！')
      },
    },
  }
</script>

3. 总结

以上就是使用 Vue 实现移动端图片上传和压缩上传的完整过程。需要注意的是，在实现过程中，还需要注意其他细节问题，例如：上传的文件类型、大小限制、图片文件的格式转换等问题，需要根据具体需求进行选取实现方式。

另外，上述示例代码中使用的是 HTML5 原生提供的 API，在不同设备和不同浏览器上使用效果可能存在差异，可以使用第三方库进行兼容性处理，例如：compressorjs 和 lrz 等库，可以有效解决兼容性问题，并提供更多的可配置参数，以满足更多需求和场景的使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue移动端实现图片上传及超过1M压缩上传 - Python技术站