记一次前后端分离项目中---关于文件上传解决的思路

---

前言

项目模块为添加课程模块，添加课程里面需要上传课程图片和课程视频，接下来说说如何处理手动上传文件的思路

---

一、首先了解ElementUI中几个标签属性的作用

:auto-upload=“false” 属性的值为Boolean，false为取消文件自动上传

:http-request=“myUpload” 覆写文件上传行为，当:auto-upload="false"时生效

@click=“submitUpload(1)” 绑定事件，方法名为submitUpload()，参数为1

前端页面图

---

二、点击上传服务器按钮触发事件submitUpload()

2.1此事件做两件事：

• 判断上传的是图片还是视频
• 调用文件上传的函数myUpload()

代码如下：

submitUpload(value) {
   
    //value是一个写死的数字，1为图片，2为视频
    if(value==1){
   
     //调用sumbit()会自动触发:http-request这个属性绑定的方法---myUpload()
     this.$refs.upload1.submit()
    }else{
   
     this.$refs.upload2.submit()
    }

},

---

三、myUpload函数

3.1myUpload函数做三件事：

• 需要对后端传参
• 接收后端返回来的结果集
• 同时显示上传的图片或者视频的预览图

代码如下：

myUpload(content) {
   
    //请求参数这里引用一种新用法---FormDate()一种表示表单数据键值对的接口
    let data = new  FormData()
    data.append