引言

1. 图片上传的基本流程

  1. 创建上传组件：使用<el-upload>组件实现图片上传的基本功能。
  2. 处理图片文件：对上传的图片文件进行格式、大小等校验。
  3. 发送请求：将图片文件发送到服务器进行处理。
  4. 展示结果：根据服务器返回的结果，展示上传成功或失败的消息。

2. 使用Element Plus实现图片上传

2.1 创建上传组件

首先，需要在项目中引入Element Plus，并创建一个上传组件：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    }
  }
};
</script>

2.2 处理图片文件

before-upload(file) {
  const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJPGPNG) {
    this.$message.error('上传图片只能是 JPG/PNG 格式!');
    return false;
  }
  const isLt500KB = file.size / 1024 / 1024 < 0.5;
  if (!isLt500KB) {
    this.$message.error('上传图片大小不能超过 500KB!');
    return false;
  }
  return true;
}

2.3 发送请求

on-success(response, file, fileList) {
  console.log(response);
}

2.4 展示结果

根据服务器返回的结果，可以展示上传成功或失败的消息：

if (response.status === 200) {
  this.$message.success('上传成功!');
} else {
  this.$message.error('上传失败!');
}

3. 避开常见陷阱

  1. 上传文件过大：上传文件过大可能会导致服务器压力过大，甚至崩溃。可以通过前端校验文件大小来避免这种情况。
  2. 图片格式错误：确保用户上传的图片格式正确，可以通过前端校验图片格式来避免这种情况。
  3. 网络问题：上传过程中可能会出现网络问题，可以通过设置超时时间、重试机制等方式来提高上传的稳定性。

总结