使用vue和element-ui上传图片及视频文件方式

为了使用Vue和Element-UI上传图片和视频文件，你需要遵循以下攻略：

步骤1：安装Element-UI

首先，你需要将Element-UI安装到你的Vue项目中。可以通过以下命令来安装它：

npm install element-ui -S

步骤2：引入Element-UI

在Vue项目的入口文件（例如main.js）中引入并注册Element-UI：

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

Vue.use(ElementUI)

步骤3：创建上传组件

定义一个可以上传文件的组件。你可以使用<el-upload>元素来创建一个上传组件。

<template>
  <el-upload
    class="upload-demo"
    :headers="headers"
    :multiple="multiple"
    :show-file-list="showFileList"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
    action="/upload"
    :data="formData">
    <el-button size="small" type="primary">点击上传文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif类型的文件，且不超过2M</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      headers: {
        Authorization: 'Bearer {token}'
      },
      multiple: false,
      showFileList: false,
      formData: {
        type: 'image'
      }
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;

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

这个组件具有以下功能：

• 只允许上传jpg/png/gif类型的文件；
• 上传的文件大小不要超过2M；
• 显示上传成功和上传失败的消息。

步骤4：处理上传

当用户上传文件时，上传组件会调用已定义的handleSuccess方法。

在这个方法中，你可以对上传的文件进行处理，比如将文件保存到云存储或将文件信息存储到数据库中。以下是一个保存文件到AWS S3存储桶中的例子：

handleSuccess(response) {
  this.$message.success('上传成功！');

  // 将文件上传到S3桶
  const data = response.data;
  const URL = `https://${process.env.VUE_APP_S3_BUCKET}.s3.${process.env.VUE_APP_S3_REGION}.amazonaws.com/${data.filepath}`;
  const xhr = new XMLHttpRequest();
  xhr.open('PUT', URL, true);
  xhr.setRequestHeader('Content-Type', data.type);
  xhr.setRequestHeader('x-amz-acl', 'public-read');
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('文件已成功上传');
    }
  };
  xhr.onerror = function() {
    console.log('上传文件时发生错误');
  };
  xhr.send(data.file);
}

注意，你需要在Vue项目的.env文件中设置以下环境变量：VUE_APP_S3_BUCKET和VUE_APP_S3_REGION，使用的是AWS S3存储桶。

示例1：上传图片

下面是一个上传图片的示例，使用type属性指定上传的文件类型为image，并在beforeUpload方法中检查图片类型和大小：

<template>
  <el-form>
    <el-form-item label="图片">
      <upload-component :formData="{ type: 'image' }" />
    </el-form-item>
  </el-form>
</template>

<script>
import UploadComponent from './UploadComponent';

export default {
  name: 'ImageUpload',
  components: {
    UploadComponent
  }
};
</script>

示例2：上传视频

以下是一个上传视频的示例，使用type属性指定上传的文件类型为video，并在beforeUpload方法中检查视频类型和大小：

<template>
  <el-form>
    <el-form-item label="视频">
      <upload-component :formData="{ type: 'video' }" />
    </el-form-item>
  </el-form>
</template>

<script>
import UploadComponent from './UploadComponent';

export default {
  name: 'VideoUpload',
  components: {
    UploadComponent
  }
};
</script>

这样，你就可以成功通过Vue和Element-UI上传图片和视频文件了。