详解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实现分片上传选取等，可以满足大多数上传需求。