vue+element upload上传带参数的方法

发布时间：2022-04-25 10:27:51 作者：iii
来源：亿速云阅读：2851

Vue + Element Upload 上传带参数的方法

引言
Element Upload 组件简介
Vue 项目中的文件上传
Element Upload 组件的基本使用
上传文件时携带额外参数
动态生成上传参数
处理上传过程中的错误
上传文件前的验证
上传文件后的处理
多文件上传
文件上传的进度条
文件上传的取消与重试
文件上传的断点续传
文件上传的安全性
总结

引言

在现代 Web 开发中，文件上传是一个常见的需求。无论是上传图片、文档还是其他类型的文件，开发者都需要确保上传过程既高效又安全。Vue.js 流行的前端框架，结合 Element UI 的 Upload 组件，可以轻松实现文件上传功能。本文将详细介绍如何在 Vue 项目中使用 Element Upload 组件，并探讨如何在上传文件时携带额外参数。

Element Upload 组件简介

Element UI 是一个基于 Vue.js 的桌面端组件库，提供了丰富的 UI 组件，其中 Upload 组件用于文件上传。Upload 组件支持多种上传方式，包括拖拽上传、手动上传、多文件上传等。它还提供了丰富的 API 和事件钩子，方便开发者进行自定义操作。

Vue 项目中的文件上传

在 Vue 项目中使用 Element Upload 组件，首先需要安装 Element UI 库。可以通过 npm 或 yarn 进行安装：

npm install element-ui --save

然后在项目的 main.js 文件中引入 Element UI：

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

Vue.use(ElementUI);

Element Upload 组件的基本使用

在 Vue 组件中使用 Upload 组件非常简单。以下是一个基本的示例：

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
};
</script>

在这个示例中，action 属性指定了文件上传的服务器地址，on-success 和 on-error 是上传成功和失败时的回调函数。

上传文件时携带额外参数

在实际开发中，我们通常需要在上传文件时携带一些额外的参数，例如用户 ID、文件类型等。Element Upload 组件提供了 data 属性，可以用于传递额外的参数。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :data="uploadData"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadData: {
        userId: 123,
        fileType: 'image'
      }
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
};
</script>

在这个示例中，uploadData 对象包含了需要上传的额外参数。这些参数会随着文件一起发送到服务器。

动态生成上传参数

有时候，我们需要根据用户的操作动态生成上传参数。可以通过在 data 属性中使用函数来实现：

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :data="getUploadData"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      userId: 123,
      fileType: 'image'
    };
  },
  methods: {
    getUploadData() {
      return {
        userId: this.userId,
        fileType: this.fileType
      };
    },
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
};
</script>

在这个示例中，getUploadData 方法返回一个包含动态生成参数的对象。

处理上传过程中的错误

在上传过程中，可能会遇到各种错误，例如网络错误、文件格式错误等。Element Upload 组件提供了 on-error 事件钩子，用于处理上传失败的情况。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
      this.$message.error('上传失败，请重试');
    }
  }
};
</script>

在这个示例中，handleError 方法会在上传失败时被调用，并显示一个错误提示。

上传文件前的验证

在上传文件之前，我们通常需要对文件进行一些验证，例如检查文件大小、文件类型等。Element Upload 组件提供了 before-upload 事件钩子，用于在上传前进行验证。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
};
</script>

在这个示例中，beforeUpload 方法会在上传前检查文件类型和大小，如果不符合要求，则阻止上传并显示错误提示。

上传文件后的处理

上传文件后，我们通常需要对服务器返回的数据进行处理。Element Upload 组件提供了 on-success 事件钩子，用于处理上传成功后的操作。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
      this.$message.success('上传成功');
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
};
</script>

在这个示例中，handleSuccess 方法会在上传成功后显示一个成功提示。

多文件上传

Element Upload 组件支持多文件上传。可以通过设置 multiple 属性来启用多文件上传。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    multiple
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
};
</script>

在这个示例中，multiple 属性启用了多文件上传功能。

文件上传的进度条

Element Upload 组件提供了 on-progress 事件钩子，用于显示文件上传的进度条。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-progress="handleProgress"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleProgress(event, file, fileList) {
      console.log('上传进度', event.percent);
    },
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
};
</script>

在这个示例中，handleProgress 方法会在上传过程中显示上传进度。

文件上传的取消与重试

Element Upload 组件支持取消和重试上传操作。可以通过 on-remove 和 on-retry 事件钩子来实现。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-remove="handleRemove"
    :on-retry="handleRetry"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleRemove(file, fileList) {
      console.log('文件已移除', file);
    },
    handleRetry(file, fileList) {
      console.log('重试上传', file);
    },
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
};
</script>

在这个示例中，handleRemove 方法会在文件被移除时调用，handleRetry 方法会在重试上传时调用。

文件上传的断点续传

断点续传是指在上传过程中，如果上传中断，可以从断点处继续上传。Element Upload 组件本身不支持断点续传，但可以通过自定义实现来实现断点续传功能。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :http-request="customUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    customUpload(options) {
      const { file, onProgress, onSuccess, onError } = options;
      const formData = new FormData();
      formData.append('file', file);

      const xhr = new XMLHttpRequest();
      xhr.open('POST', options.action, true);

      xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
          onProgress({ percent: (event.loaded / event.total) * 100 });
        }
      };

      xhr.onload = () => {
        if (xhr.status === 200) {
          onSuccess(xhr.responseText);
        } else {
          onError(new Error('上传失败'));
        }
      };

      xhr.onerror = () => {
        onError(new Error('上传失败'));
      };

      xhr.send(formData);
    },
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
};
</script>

在这个示例中，customUpload 方法实现了自定义的上传逻辑，支持断点续传。

文件上传的安全性

文件上传功能可能会带来一些安全风险，例如文件类型验证不严格、文件内容被篡改等。为了确保文件上传的安全性，可以采取以下措施：

文件类型验证：在上传前对文件类型进行严格验证，确保只允许上传安全的文件类型。
文件大小限制：限制上传文件的大小，防止上传过大的文件导致服务器资源耗尽。
文件内容检查：在上传后对文件内容进行检查，确保文件内容没有被篡改。
使用 HTTPS：确保文件上传的请求通过 HTTPS 进行，防止数据被窃取。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.error('上传失败', err);
    }
  }
};
</script>

在这个示例中，beforeUpload 方法对文件类型和大小进行了严格验证，确保上传的文件是安全的。

总结

通过本文的介绍，我们详细探讨了如何在 Vue 项目中使用 Element Upload 组件实现文件上传功能，并探讨了如何在上传文件时携带额外参数。我们还介绍了如何处理上传过程中的错误、上传文件前的验证、上传文件后的处理、多文件上传、文件上传的进度条、文件上传的取消与重试、文件上传的断点续传以及文件上传的安全性。希望本文能帮助你在实际开发中更好地使用 Element Upload 组件，实现高效、安全的文件上传功能。