前言：在实习过程，遇到了需要开发大文件上传的业务，由于公司之前的小文件上传是用action的方式来上传，但是这样做有比较大的限制，而且很容易遇到跨域的问题出现。

解决方法

需要使用 :http-request 的方式上传，通过这种方式上传，可以不给action赋值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<el-form-item label="视频封面上传">
  <el-upload
    class="upload-demo"
    action
    :http-request="uploadImg"
    list-type="picture-card"
    :limit="1"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-exceed="handleExceed"
    :on-change="handleChangeImg"
    :before-upload="beforeImgUpload"
    :data="uploadData"
    :file-list="fileList"
    accept="image/png, image/jpeg"
  >
      <i class="el-icon-plus"></i>
      <div class="el-upload__tip" slot="tip">上传视频封面图片文件</div>
  </el-upload>
</el-form-item>

这里上传是采用自动上传的方式来执行，通过 :http-request的方式引入axios封装的request请求来调用接口方法，获取数据，一般可以解决跨域的问题。

此外，需要给request加入以下请求头，是用来上传文件流用的

1
let headers = { "Content-Type": "multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq" }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<el-form-item label="视频上传" v-loading="videoLoading">
    <el-upload
    class="upload-demo"
    action
    :http-request="uploadFile"
    :header="header"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-change="handleChange"
    :before-upload="beforeFileUpload"
    drag
    multiple
    :limit="1"
    :on-exceed="handleExceed"
    :file-list="fileList"
    :data="uploadData"
    accept="video/mp4, video/flv, video/avi, video/rmvb"
  >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">上传视频文件，可以拖拽上传</div>
  </el-upload>
</el-form-item>

上传的方法

:http-request 指定自定义的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 上传视频
uploadFile(params){
    console.log("正在上传视频:",params)
    // 开始等待
    this.videoLoading = true
    const formData = new FormData()
 formData.append('file', params.file)
    upload(formData).then((res) =>{
        console.log("视频上传：",res)
        if(res.code === '1'){
            this.detialForm.fileId = res.data.fileId;
            this.detialForm.fileName = res.data.fileName;
            this.detialForm.filePath = res.data.filePath;
            this.detialForm.fileUrl = res.data.fileUrl;
        } else {
            this.$message({
              message: "上传失败，请重试",
              type: "warning",
            });
        }
        // 等待完成
        this.videoLoading = false
    })
},

// 上传视频封面
uploadImg(params){
    const formData = new FormData()
 formData.append('file', params.file)
    upload(formData).then((res) =>{
        console.log("图片上传：",res)
        this.detialForm.popUrl = res.data.fileUrl;
    })
},