vue elementui 文件上传

Vue.js 是一个框架，而 Element UI 是一个基于 Vue.js 的 UI 组件库。要在 Vue.js 中使用 Element UI 的文件上传组件，首先需要安装并引入 Element UI，然后在组件中使用 el-upload 组件即可。例如：

<template>
  <div>
    <el-upload action="上传地址" :on-success="uploadSuccess">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    uploadSuccess(res) {
      console.log("上传成功");
    }
  }
};
</script>

上传地址即为文件上传的服务器地址，on-success 为文件上传成功后的回调函数。

相关问题

vue elementUI 文件上传 前后端代码

以下是Vue ElementUI文件上传的前后端代码示例：

前端代码：

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

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

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
      }
      return isJPG && isLt500K;
    },
    handleSuccess(res) {
      if (res.code === 0) {
        this.$message.success('上传成功');
      } else {
        this.$message.error('上传失败');
      }
    }
  }
}
</script>

后端代码（Node.js Express框架）：

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 设置文件上传目录
const uploadPath = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadPath)){
  fs.mkdirSync(uploadPath);
}
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadPath);
  },
  filename: function (req, file, cb) {
    const extname = path.extname(file.originalname);
    const filename = Date.now() + extname;
    cb(null, filename);
  },
});
const upload = multer({ storage });

// 处理文件上传请求
app.post('/api/upload', upload.single('file'), function (req, res, next) {
  // 获取上传的文件信息
  const file = req.file;
  if (!file) {
    return res.json({ code: 1, message: '上传失败' });
  }
  console.log('文件上传成功：', file.filename);
  return res.json({ code: 0, message: '上传成功' });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

以上代码示例中，前端代码使用了Vue ElementUI的el-upload组件实现文件上传，设置了文件类型和大小的限制，并通过axios发送文件上传请求。后端代码使用了Node.js的Express框架和multer中间件处理文件上传请求，将上传的文件保存到指定目录中，并返回上传结果和文件信息。

vue elementui实现文件上传

在Vue和ElementUI中实现文件上传需要使用ElementUI中的el-upload组件。首先需要安装ElementUI和相关插件：

1.通过 npm 安装 ElementUI 和 vue-resource：

npm install element-ui --save

npm install vue-resource --save

2.在Vue项目中的main.js文件中引入ElementUI和VueResource：

import Vue from 'vue'
import ElementUI from 'element-ui'
import VueResource from 'vue-resource'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.use(VueResource)

3.在需要上传文件的组件中添加el-upload组件：

<template>
<el-upload
class="upload-demo"
:headers="headers"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:on-success="handleSuccess">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">jpg/png 文件，最大支持 2MB</div>
</el-upload>
</template>

其中，headers是文件上传时需要携带的请求头；handlePreview、handleRemove、beforeUpload和handleSuccess是自定义的方法。

4.在组件的script中添加自定义方法：

export default {
data () {
return {
headers: {
Authorization: 'Bearer ' + sessionStorage.getItem('token')
}
}
},
methods: {
handlePreview (file) {
console.log(file)
},
handleRemove (file) {
console.log(file)
},
beforeUpload (file) {
if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
this.$message.error('上传文件只能是jpg或png格式!')
return false
}
if (file.size / 1024 / 1024 > 2) {
this.$message.error('上传文件大小不能超过 2MB!')
return false
}
},
handleSuccess (response, file, fileList) {
console.log(response, file, fileList)
}
}
}

在以上方法中，handlePreview、handleRemove和handleSuccess方法分别是文件预览、文件移除和文件上传成功时触发的方法；beforeUpload方法用于限制文件大小和格式。

5.最后，可以通过el-upload组件的action属性指定文件上传的处理地址：

<el-upload
class="upload-demo"
:headers="headers"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:on-success="handleSuccess"
action="http://your-upload-url.com">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">jpg/png 文件，最大支持 2MB</div>
</el-upload>