前端文件、图片直传OOS、分片上传、el-upload上传（vue+elementUI）

在使用Vue.js和Element UI进行开发时，如果需要实现文件、图片的直传到对象存储服务（比如阿里云OSS），并且支持分片上传，可以使用el-upload组件结合第三方库（如ali-oss）来实现。以下是一个简化的例子：

首先，安装ali-oss库：

npm install ali-oss

然后，在Vue组件中使用el-upload：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    multiple>
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
import OSS from 'ali-oss';
 
export default {
  data() {
    return {
      client: null,
      uploadUrl: 'http://your-server/oss/sign' // 签名服务地址
    };
  },
  created() {
    this.initOSS();
  },
  methods: {
    initOSS() {
      this.client = new OSS({
        region: '<oss-region>',
        accessKeyId: '<oss-access-key-id>',
        accessKeySecret: '<oss-access-key-secret>',
        bucket: '<oss-bucket-name>'
      });
    },
    beforeUpload(file) {
      const fileName = `${Date.now()}-${file.name}`;
      return this.client.multipartUpload(fileName, file).then((result) => {
        // 返回的result包含了上传的信息，可以根据业务需要进行处理
        console.log(result);
        return {
          fileName: result.name,
          fileUrl: result.res.requestUrls[0]
        };
      }).catch((error) => {
        console.error(error);
        this.$message.error('文件上传失败');
      });
    },
    handleSuccess(response, file, fileList) {
      this.$message.success('文件上传成功');
    },
    handleError(err, file, fileList) {
      this.$message.error('文件上传出错');
    }
  }
};
</script>

在上述代码中，before-upload钩子用于执行文件上传到OSS之前的操作，这里是使用multipartUpload方法进行分片上传。上传成功后，可以通过on-success钩子处理成功的响应。如果上传失败，则通过on-error钩子处理错误。

注意：

1. 需要有一个服务器端签名接口，用于生成上传所需的签名信息（uploadUrl），以保证客户端上传安全。
2. 在实际应用中，应该对accessKeyId、accessKeySecret等敏感信息进行安全处理，避免泄露。
3. 分片大小和并行上传的片数可以通过multipartUpload方法的参数进行配置。