elementUI自定义上传文件（前端后端超详细过程）

在使用Element UI的Upload组件进行文件上传时，可以通过设置before-upload钩子来自定义上传的行为。以下是一个简单的例子，展示了如何在上传文件之前对其进行处理，并且如何与后端进行交互。

前端代码（Vue）:

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: 'http://your-backend-endpoint/upload', // 替换为你的后端上传接口
      file: null
    };
  },
  methods: {
    beforeUpload(file) {
      // 在这里可以进行文件的处理，比如压缩、裁剪等
      // 这里只是简单示例，直接将文件赋值给data中的file
      this.file = file;
      return false; // 返回false停止自动上传
    },
    submitUpload() {
      const formData = new FormData();
      formData.append('file', this.file); // 'file' 是后端接收文件的字段名
 
      // 使用axios进行文件上传
      axios.post(this.uploadUrl, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        this.$message.success('文件上传成功');
        // 处理上传成功的结果
      }).catch(error => {
        this.$message.error('文件上传失败');
        // 处理上传失败的结果
      });
    },
    handleSuccess(response, file, fileList) {
      // 文件上传成功后的钩子
    },
    handleError(err, file, fileList) {
      // 文件上传失败后的钩子
    }
  }
};
</script>

后端代码（Node.js）:

const express = require('express');
const multer = require('multer');
const app = express();
 
// 设置存储配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 确保这个文件夹已经存在
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})
const upload = multer({ storage: storage })
 
// 处理上传的文件
app.post('/upload', upload.single('file'), (req, res) => {
  // 这里可以对上传的文件进行处理，例如保存到数据库等
  // 文件保存在req.file
  if (!req.file) {
    return res.status(400).send('No file uploaded.');
  }
  res.send('File uploaded successfully.');
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

确保后端服务器正在运行，并且上传的URL与后端服务器的地址匹配。这个例子使用了Express框架和Multer中间件来处理文件上传。在实际应用中，你可能需要进一步处理文件，例如验证文件类型、大小，甚至进行文件处理后再保存到服务器。