vue上传视频upload的引用

上传视频用的el-upload,
前后端分离的项目，应该用:

http-request=“触发的方法名”

:show-file-list=“false”

接口不需要单独封装，直接使用
request.js文件

const requests = axios.create({
    baseURL: '你的ip', 
    timeout: 6000 // 请求超时时间
})
//请求拦截器
requests.interceptors.request.use(config => {
    // 需要授权的 API ，必须在请求头中使用 `Authorization` 字段提供 `token` 令牌
    const token = window.localStorage.getItem('X-Access-Token')
    if (token) {
        config.headers['X-Access-Token'] = token
    }
    // 在最后，必须 return config;
    return config
},
    error => {
        //  这里处理一些请求出错的情况
        Promise.reject(error)
    })
    。。。。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这里是测试环境，所以token是保存的localStorage

config.js文件

export function postAction(url, parameter) {
  return axios({
    url: url,
    method: 'post',
    data: parameter
  })
}
1
2
3
4
5
6
7

api.js文件

// 上传文件
const uploadFile = (parameter) => postAction('接口地址', parameter);//上传文件
1
2

如上所述，接下来下面看看上传的方法
一般后端会有一个上传文件的接口提供给你

handleAvatarSuccess(params) {//方法名调用，params是文件的信息
      let formData = new FormData();//创建一个formData实例
      formData.append("file", params.file);//将文件信息加进去
      uploadFile(formData)//上传的接口
        .then((res) => {
          console.log(res);//成功的回调
        })
        .catch((err) => {
          console.log(err);//失败的回调
        });
    },
1
2
3
4
5
6
7
8
9
10
11

上面用formData一定要写第2,3行

因为已经传过了，所以显示文件存在，接口是通的，完成