在iViewUpload上使用的图片上传方法 - iViewUpload图片上传工具

一、iViewUpload图片上传工具的介绍

iViewUpload是一款基于Vue的插件，提供了强大的文件上传功能，可以方便地在Vue项目中使用。它支持上传文件、图片、视频等，同时也可自定义上传接口、参数，非常灵活。

其中，图片上传功能常用于许多网站或应用程序中，满足了用户上传、处理、展示图片的需求。接下来我们会从选取图片、预览图片、上传图片等方面详细介绍如何在iViewUpload中使用图片上传功能。

二、选取图片

在使用上传图片功能之前，首先需要让用户选取需要上传的图片。iViewUpload提供了非常方便的图片选取功能，只需要使用upload组件就可以轻松实现。

以下是upload组件的基本使用方法：

  <template>
    <div class="upload-demo">
      <i-upload
        :list-type="listType"
        :multiple="true"
        :on-change="handleChange"
        :before-upload="beforeUpload"
        :show-upload-list="false"
        :directory="isDirectory"
        :disabled="disabled"
        :limit="limit"
        :file-size="maxSize * 1024"
        :accept="accept"
      >
        <div class="upload-demo-tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
        <i-button icon="ios-cloud-upload" type="primary">上传图片</i-button>
      </i-upload>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
          listType: 'picture',
          isDirectory: false,
          disabled: false,
          limit: 3,
          maxSize: 500,
          accept: 'image/jpeg,image/png'
        };
      },
      methods: {
        // 图片上传之前的钩子函数，用于对图片进行校验
        beforeUpload(file) {
          const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
          const isLt500K = file.size / 1024 < 500;
          if (!isJPG) {
            this.$Message.error('上传图片只能是 JPG/PNG 格式!');
          }
          if (!isLt500K) {
            this.$Message.error('上传图片大小不能超过 500K!');
          }
          return isJPG && isLt500K;
        },
        // 文件改变时的钩子函数，用于获取选中的图片
        handleChange(info) {
          const fileList = info.fileList;
          console.log(fileList);
        }
      }
    };
  </script>

通过以上代码，我们可以完成图片的选取，并可对选中的图片进行校验，确保上传的图片格式、大小、数量符合要求。需要注意：上传的图片格式和大小、上传图片的数量都是可以通过代码进行配置的。

三、预览图片

当用户选取好需要上传的图片后，我们可以通过预览来检查所选图片是否符合要求。而iViewUpload也提供了非常方便的预览功能，只需要使用upload组件和Modal组件就可以轻松实现。

以下是upload和Modal组件的基本使用方法：

  <template>
    <div class="upload-demo">
      <i-upload
        :list-type="listType"
        :multiple="true"
        :before-upload="beforeUpload"
        :show-upload-list="false"
        :directory="isDirectory"
        :disabled="disabled"
        :limit="limit"
        :file-size="maxSize * 1024"
        :accept="accept"
      >
        <div class="upload-demo-tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
        <i-button icon="ios-cloud-upload" type="primary">上传图片</i-button>
      </i-upload>

      <Modal
        v-model="previewVisible"
        width="60%"
        :destroy-on-close="true"
        @on-cancel="handleCancel"
      >
        <img :src="previewImage" style="width: 100%;">
      </Modal>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
          listType: 'picture-card',
          fileList: [],
          previewVisible: false,
          previewImage: '',
          isDirectory: false,
          disabled: false,
          limit: 3,
          maxSize: 500,
          accept: 'image/jpeg,image/png'
        };
      },
      methods: {
        // 图片上传之前的钩子函数，用于对图片进行校验
        beforeUpload(file) {
          const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
          const isLt500K = file.size / 1024 < 500;
          if (!isJPG) {
            this.$Message.error('上传图片只能是 JPG/PNG 格式!');
          }
          if (!isLt500K) {
            this.$Message.error('上传图片大小不能超过 500K!');
          }
          return isJPG && isLt500K;
        },
        // 取消预览图片时的钩子函数
        handleCancel() {
          this.previewVisible = false;
        },
        // 预览图片时的钩子函数
        handlePreview(file) {
          this.previewImage = file.url || file.thumbUrl;
          this.previewVisible = true;
        }
      }
    };
  </script>

通过以上代码，我们完成了选取和预览图片的功能，当预览窗口关闭时，iViewUpload插件也会自动清除用户选择的文件。需要注意：上传文件的选择类型、上传文件的数量、预览图片时的钩子函数等都是可以通过代码进行控制的。

四、上传图片

当用户确认所选的图片符合要求后，我们就可以将选中的图片上传到服务器。iViewUpload的上传功能可以通过设置action参数，来指定具体上传的接口地址。同时，还提供了上传进度条、上传成功后回调等其他功能。

以下是upload和Message组件的基本使用方法：

  <template>
    <div class="upload-demo">
      <i-upload
        :list-type="listType"
        :multiple="true"
        :before-upload="beforeUpload"
        :show-upload-list="true"
        :directory="isDirectory"
        :disabled="disabled"
        :limit="limit"
        :file-size="maxSize * 1024"
        :accept="accept"
        :action="uploadImg"
        :on-success="handleSuccess"
        :on-progress="(file, event) => progress(file, event)"
      >
        <div class="upload-demo-tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
        <i-button icon="ios-cloud-upload" type="primary">上传图片</i-button>
      </i-upload>>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
          listType: 'picture-card',
          fileList: [],
          isDirectory: false,
          disabled: false,
          limit: 3,
          maxSize: 500,
          accept: 'image/jpeg,image/png',
          uploadImg: '/api/upload'
        };
      },
      methods: {
        // 图片上传之前的钩子函数，用于对图片进行校验
        beforeUpload(file) {
          const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
          const isLt500K = file.size / 1024 < 500;
          if (!isJPG) {
            this.$Message.error('上传图片只能是 JPG/PNG 格式!');
          }
          if (!isLt500K) {
            this.$Message.error('上传图片大小不能超过 500K!');
          }
          return isJPG && isLt500K;
        },
        // 图片上传成功后的钩子函数，用于回调处理
        handleSuccess(res, file) {
          if (res.code === 200) {
            this.$Message.success('上传成功');
          } else {
            this.$Message.error(res.msg);
          }
        },
        // 图片上传进度条钩子函数
        progress(file, event) {
          console.log(file, event);
        }
      }
    };
  </script>

通过以上代码，我们就完成了图片上传的功能。需要注意：上传图片的接口地址、上传成功后的钩子函数、上传进度条的钩子函数、上传失败后的提示信息等都是可以通过代码进行自定义的。