在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&#x3E>
    </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>

通過以上代碼，我們就完成了圖片上傳的功能。需要注意：上傳圖片的介面地址、上傳成功後的鉤子函數、上傳進度條的鉤子函數、上傳失敗後的提示信息等都是可以通過代碼進行自定義的。