文件上传功能应该怎么做？

流程如下：1、input type = file2、调用上传前事件3、上传前事件中将file文件转formData4、调用后端oss接口上传文件5、上传完成后回显数据6、点击图片/视频预览

<el-upload class="upload-demo" action="" :file-list="fileList"  :before-upload="beforeAvatarUpload">
    <el-button icon="el-icon-upload" size="small" type="primary">
        上传
    </el-button>
</el-upload>

beforeAvatarUpload为文件上传前的操作，该方法中会携带一个参数file，file就是当前上传的文件，我们需要用new FormData()转为file文件格式，调用后端接口上传图片/视频。

beforeAvatarUpload(file) {
     let formData = new FormData();
     formData.append('file',file)
     // 调用oss后端接口
    ossUpload(formData).then(el=>{
       // 上传成功后返回的数据：el，该参数内的url就是视频/图片http的访问地址，将该方法存储到回显的数据中
     this.upload(el.data)
    }).catch(err=>{console.log(err)})
      
}

 upload(val) {
    // 此处可以校验上传的格式，如果视频格式不是mp4则会提示
   if(val.fileSuffix != ".mp4"){
       return this.$message.error('视频格式不正确')
    }
   this.dataList.push({
     fvName: val.name,
     fvUrl: val.url,
     //.....
   })
}

图片的上传也是一样的，此时图片上传和视频上传的一般流程就结束了，页面列表中遍历dataList即可回显数据。

如果你用的element ui那么直接用组件即可，不需要input type = file，如果你不想额外写函数上传，那么只需要将组件的action的数据填写成后端给到的oss请求，然后利用组件的上传成功事件on-success事件获取上传回调