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)
    })
    。。。。

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

config.js文件

export function postAction(url, parameter) {
  return axios({
    url: url,
    method: 'post',
    data: parameter
  })
}

api.js文件

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

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

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);//失败的回调
        });
    },

上面用formData一定要写第2,3行
在这里插入图片描述
因为已经传过了,所以显示文件存在,接口是通的,完成

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值