vue项目中使用upload上传表单视频文件

素颜马尾好姑娘i 2023-01-03 04:53 189阅读 0赞

情景：上传视频的同时需要传递一些其它参数 与表单一起

<el-form-item label="上传视频" prop="video">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :http-request="getFile"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :on-remove="handleRemove"
                  ref="uploaddemo"
                >
                  <el-button size="small" type="primary">上传</el-button>
                </el-upload>
              </el-form-item>
              <span>
                <el-button
                  size="small"
                  type="success"
                  class="confirmUpload"
                  @click="upload"
                  >确认上传</el-button
                >
                <el-button size="small" @click="handleCloseDialog"
                  >取消上传</el-button
                >
              </span>

data ( ) { 
     return { 
     file: { } //视频文件
     }
    }
    // 上传
        getFile(item) { 
          // console.log(item.file)
          this.file = item.file;
          console.log(this.file);
        },
        
    // 限制文件上传数量 一次只能上传一个
        handleExceed(files) { 
          this.$message.warning(
            `当前限制选择 1 个文件，已选择 ${ files.length} 个文件`
          );
        },
        
    // 删除所选文件
        handleRemove(files, file) { 
          this.$refs.uploaddemo.clearFiles();
          this.file = { }
        },
        
    // 确认上传
        upload() { 
          let fd = new FormData();
          fd.append("video", this.file); //传文件
          fd.append("cameraId", this.formModel.fields.cameraId);
          fd.append("userId", this.formModel.fields.userId);
          fd.append("sortId", this.formModel.fields.sortId);
          let valid = this.validateForm();
          // console.log(this.file) JSON.stringify(this.file) !== "{}";
          // 判断如果未上传视频的话提示上传
          if (valid && JSON.stringify(this.file) !== "{}") { 
            console.log(this.file);
            addMaterial(fd).then((res) => { 
              console.log(res);
              if (res.data.code == 200) { 
                this.$message({ 
                  message: res.data.message,
                  type: "success",
                });
                this.handleGetList();
                this.formModel.opened = false;
              } else { 
                this.$message({ 
                  message: res.data.message,
                  type: "warning",
                });
              }
            });
          } else { 
            this.$message({ 
              message: "请选择一个视频",
              type: "warning",
            });
          }
        },