vue-element-ui-文件上传ts版

一、vue-element-ui-文件上传组件【Upload】ts版

• 场景

  • 在vue的项目中引用了element-ui，使用其上传文件的ui组件，调用后端接口，完成本地文件文件上传

• 官网解释

  • https://element.eleme.io/#/zh-CN/component/upload
  • 重点是官网下的属性参数

• 实现

  • 注册Upload的UI组件

  • 页面部分

    <template>
      <div>
        <h1>测试页面</h1>
        <el-upload
          class="upload-demo"
          ref="upload"
          action=""
          :http-request="uploadFile"
          :on-change="change"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
    
    </template>
    

    • 这边只是简单的demo，如果需要更加复杂的自行改造，比如上传列表移出，样式改造等

  • ts逻辑部分

    <script lang="ts">
    
    import {
      Component, Vue,
    } from 'vue-property-decorator';
    
    import axios from 'axios';
    
    
      // 引入组件
      @Component({
        components: {
        }
      })
    // @Component
    export default class Test extends Vue {
      // 定义多文件数组
      private file4Upload: [];
    
      // 重写自定义提交
      uploadFile(file) {
        // 封装表单参数
        const formData = new FormData();
        formData.append('file', file.file);
        formData.append('userId', '123');
        formData.append('videoSeconds', '111');
        formData.append('videoWidth', '111');
        formData.append('videoHeight', '111');
    
        const config = {
          method: 'post', // 请求方式
          url: 'http://localhost:8081/video/upload', // 后端接口定义的请求的地址
          data: formData,
          headers: { 'Content-Type': 'multipart/form-data' }, // 配置header需要跟后端一致
        };
        // 提交请求
        axios(config);
      }
    
      // 如果是多文件上传可以使用该方案
      change(file) {
        // 文件流
        console.log(file.raw);
        this.file4Upload.push(file.raw);
      }
    
      // 按钮提交
      submitUpload() {
        this.$refs.upload.submit();
      }
    }
    </script>
    

    • axios未做封装，真实项目中，这部分需要单独封装处理
    • 核心部分看注释即可，多个文件流的获取，单文件流的获取
    • :http-request的触发时机是调用 this.$refs.upload.submit();才会触发