[Vue]自定义上传文件至服务器的两种方式

一、环境描述

脚手架：GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template

二、用原生input上传（以图片为例）

html部分：

      <h4>修改图片：</h4>
      <input
        id="fileInput"
        type="file"
        @change="handleFileUpload"
        accept="image/*"
      />

js methods部分：

    // 图片上传
    handleFileUpload(event) {
      const file = event.target.files[0]; // 上传单个图片
      const formData = new FormData();
      formData.append("file", file); // 名称、类型由后端接口决定
      
      // 下面是封装的上传函数，不同项目可能不同，可自行修改
      caseApi.uploadPicture(formData).then((res) => {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.editModel.petPicture = res.data.fileURL;
      });
    },

三、用el-upload组件上传（以视频为例）

html部分：（参考Element - The world's most popular Vue UI framework）

            <el-upload
              ref="uploadVideoForm"
              style="text-align: center"
              action=""
              drag
              :http-request="uploadVideo"
              accept="video/*"
              :file-list="fileList"
              :on-change="handleChange"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传视频文件，且不超过{{ uploadVideoConfig.maxSize }}M
              </div>
            </el-upload>

js methods部分：

    // 视频上传
    uploadVideo() {
      const file = this.videoFile;
      const formData = new FormData();
      formData.append("file", file); // 由后端接口决定

      // 下面上传文件，根据项目自行修改
      caseApi.uploadPicture(formData).then((res) => {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.videoForm.videoLink = res.data.fileURL;
        this.clearFiles("uploadVideoForm");
      });
    },
    // 发生变化时处理
    handleChange(file) {
      const fileName = file.name; // 文件名字
      const fileType = fileName.substring(fileName.lastIndexOf(".") + 1); // 文件类型
      this.videoFile = file.raw;
    },
    // 清空列表方法
    clearFiles(ref) {
      this.$refs[ref].clearFiles();
    },

js data return()部分：

      fileList: [],
      videoFile: null,

      // 视频上传配置
      uploadVideoConfig: {
        type: null,
        uploadUrl: "api/case/uploadPicture", // 上传地址
        maxSize: 1024, // 上传大小限制
        name: "file", // 上传字段
      },

注意：

1. 简单来说就是用:http-request指定文件上传的函数，原有的action、:before-upload、:on-success等不起作用。但删去action可能有报错，所以还是写了action=""。

2. 本代码没有写文件类型和大小限制。注意accept中的格式只能用于显示，如果需要做文件限制请另写代码，在:http-request的函数中实现。