【Vue】以RuoYi框架前端为例，ElementUI封装图片上传组件——将图片信息转成base64后提交到后端保存

使用Vue和ElementUI封装图片上传组件

在现代Web开发中，图片上传是一个非常常见的需求。在这篇文章中，我们将以RuoYi框架为例，结合Vue和ElementUI，封装一个图片上传组件，并将图片信息转换为Base64格式后提交到后端服务器进行保存。

1. 环境准备

首先，我们需要确保已经在Vue项目中安装了ElementUI。如果尚未安装，可以通过以下命令进行安装：

npm install element-ui --save

接着在项目中引入ElementUI（通常在main.js文件中）：

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

Vue.use(ElementUI);

2. 封装图片上传组件

创建一个名为ImageUpload.vue的组件，来处理图片的上传和转换。

<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      multiple
      :action="uploadUrl"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :show-file-list="false"
      accept="image/*">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip" type="success">只能上传jpg/png文件，且不超过2MB</div>
    </el-upload>
    <div v-if="imageList.length > 0" class="image-preview">
      <h3>预览:</h3>
      <img v-for="(img, index) in imageList" :key="index" :src="img" class="img-preview"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/api/upload', // 后端上传接口
      fileList: [],
      imageList: [],
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList;
      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageList.push(e.target.result);
      };
      reader.readAsDataURL(file.raw);
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('上传文件只能是图片！');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isImage && isLt2M;
    },
  },
};
</script>

<style scoped>
.image-preview {
  display: flex;
  flex-wrap: wrap;
}
.img-preview {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin: 10px;
}
</style>

3. 组件功能说明

1. 上传限制：我们限制了只能上传图片格式（jpg/png），并且限制了文件大小不超过2MB。通过beforeUpload方法进行验证。
2. 图片预览：当用户选择文件后，使用FileReader将其转换为Base64，同时存储在imageList中，以便后续展示。
3. 上传至后端：在el-upload中，指定了上传地址uploadUrl，可以根据实际的后端接口地址进行修改。

4. 提交数据到后端

在真实的应用场景中，我们需要提交Base64格式的数据到后端进行保存。可以在选择文件后，调用一个提交函数。

submitImages() {
  const base64Images = this.imageList.map(img => img.split(",")[1]); // 提取Base64部分

  this.$axios.post(this.uploadUrl, { images: base64Images })
    .then(response => {
      this.$message.success('上传成功！');
    })
    .catch(error => {
      this.$message.error('上传失败！');
    });
}

调用submitImages方法可以提交Base64图像数据到后端。

5. 总结

通过以上步骤，我们封装了一个图片上传组件，既可以预览用户选择的图片，又能将图片以Base64格式提交至后端。这样的组件可以有效提升用户体验，适用于需要上传图片的场景。你可以根据自己的需求扩展这个组件，比如增加进度条、处理错误信息等功能。希望对你有所帮助！