詳解el-upload上傳圖片

一、upload上傳照片和文字

el-upload提供了一種簡單的方式來上傳照片和文字，我們可以使用它輕鬆上傳圖片和附帶文字，下面我們來看看怎麼做：

1、首先，我們需要在頁面上引入el-upload組件：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :data="{ userId: 1 }"
    multiple
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">點擊上傳</el-button>
    <div slot="tip" class="el-upload__tip">jpg/png文件，大小不超過 10MB</div>
  </el-upload>
</template>

2、接著，我們需要定義兩個方法：beforeUpload和handleSuccess。其中，beforeUpload用來檢測文件是否符合要求，handleSuccess在文件上傳成功後處理返回的結果。

data() {
  return {
    fileList: []
  };
},
methods: {
  handleSuccess(response, file, fileList) {
    console.log(response, file, fileList);
  },
  beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    const isLt10M = file.size / 1024 / 1024 < 10;

    if (!isJPG && !isPNG) {
      this.$message.error('上傳圖片只能是 JPG/PNG 格式!');
    }
    if (!isLt10M) {
      this.$message.error('上傳圖片大小不能超過 10MB!');
    }
    return (isJPG || isPNG) && isLt10M;
  }
}

二、element upload上傳

el-upload是element-ui框架中內置的上傳組件，它提供了豐富的上傳功能，還允許用戶自定義上傳參數和文件篩選規則。

1、首先，我們需要在頁面上引入element-ui：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2、接著，我們需要在頁面上引入el-upload組件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :auto-upload="false"
      :on-change="uploadChange">
      <el-button size="small" type="primary">點擊上傳</el-button>
      <div slot="tip" class="el-upload__tip">jpg/png文件，大小不超過 10MB</div>
    </el-upload>
    <el-button
      class="upload-demo"
      type="success"
      @click="submitUpload">
      上傳至伺服器
    </el-button>
    <div v-for="(item, index) in fileList" :key="index">
      {{ item.name }}
    </div>
  </div>
</template>

3、然後，我們需要在data函數中定義fileList變數來存儲上傳的文件列表：

data() {
  return {
    fileList: []
  };
}

4、接著，我們需要定義兩個方法：uploadChange和submitUpload。其中，uploadChange用於上傳文件後更新文件列表，submitUpload用於將文件上傳至伺服器。

methods: {
  uploadChange(file, fileList) {
    this.fileList = fileList.slice();
  },
  submitUpload() {
    this.$refs.upload.submit();
  }
}

三、el-upload手動上傳

el-upload還支持手動上傳，這意味著用戶可以手動選擇文件，然後單擊「上傳」按鈕將其上傳到伺服器。

1、首先，我們需要在頁面上引入el-upload組件：

<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    :auto-upload="false"
    :on-change="handleChange">
    <el-button size="small" type="primary">點擊上傳</el-button>
    <div slot="tip" class="el-upload__tip">jpg/png文件，大小不超過 10MB</div>
  </el-upload>
  <el-button
    class="upload-demo"
    type="success"
    @click="submitUpload">
    上傳至伺服器
  </el-button>
</template>

2、接著，我們需要定義handleChange方法來更新文件列表：

handleChange(file, fileList) {
  this.fileList = fileList.slice();
}

3、最後，我們需要定義submitUpload方法，在用戶單擊「上傳至伺服器」按鈕時調用該方法，觸發手動上傳。

submitUpload() {
  this.$refs.upload.submit();
}

四、el-upload上傳文件夾

我們還可以使用el-upload上傳文件夾到伺服器，el-upload提供了一個directory屬性，當它設置為true時，用戶可以上傳整個文件夾，而不僅僅是單個文件。

1、首先，我們需要在頁面上引入el-upload組件：

<template>
  <el-upload
    class="upload-demo"
    :directory="true"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-change="handleChange"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">點擊上傳</el-button>
    <div slot="tip" class="el-upload__tip">文件夾，大小不超過 10MB</div>
  </el-upload>
</template>

2、接著，我們需要定義handleChange和beforeUpload方法，其中handleChage方法用於更新文件列表，beforeUpload方法用於檢測上傳的文件夾是否符合要求：

handleChange(file, fileList) {
  this.fileList = fileList.slice();
},
beforeUpload(file) {
  const isLt10M = file.size / 1024 / 1024 < 10;

  if (!isLt10M) {
    this.$message.error('上傳文件夾大小不能超過 10MB!');
  }
  return isLt10M;
}

五、webuploader分片上傳選取

除了以上提到的幾種上傳方法，我們還可以使用webuploader插件實現分片上傳選取，下面是詳細的實現方法：

1、首先，需要在頁面上引入webuploader插件的樣式文件和JS文件：

<style>
  @import url('/static/webuploader/webuploader.css');
</style>
<script src="/static/webuploader/webuploader.min.js"></script>

2、接著，我們需要創建一個容器來存儲webuploader的ui組件：

<template>
  <div id="webuploader"></div>
</template>

3、然後，我們需要在mounted方法中初始化webuploader組件：

mounted() {
  let uploader = WebUploader.create({
    auto: true,
    server: '/api/file/upload',
    pick: '#webuploader',
    resize: false,
    chunked: true,
    chunkSize: 5 * 1024 * 1024,
    chunkRetry: 3,
    threads: 1,
    fileNumLimit: 10,
    fileSizeLimit: 10 * 1024 * 1024,
    fileSingleSizeLimit: 100 * 1024 * 1024
  });
}

4、最後，我們需要在data函數中定義uploader變數來存儲webuploader組件，並在beforeDestroy方法中銷毀組件：

data() {
  return {
    uploader: null
  };
},
beforeDestroy() {
  this.uploader.destroy();
}

總結

el-upload是element-ui框架中內置的上傳組件，它提供了多種上傳方式，例如上傳照片和文字、element upload上傳、上傳文件夾、使用webuploader實現分片上傳選取等，可以滿足大多數上傳需求。