图片上传的解决方案

519 阅读1分钟

一般图片上传需要将请求头设置为这种格式 Content-Type : multipart/form-data ,但是使用axios上传文件,不需要手动设置,只需要给data参数设置一个FormData对象即可。这样本地上传的文件绑定的地址就变成了后端处理过的http地址,不再是base64格式的字符串了,提升了加载大量图片时的用户体验。

// 图片上传axios请求方法
const uploadImage = data => {
  return request({
    method: 'POST',
    url: '/mp/v1_0/user/images',
    data
  })
}

uploadRequest(file) { // 图片的上传方法,返回一个Promise<url>
  const fd = new FormData()
  fd.append('image', file) // 参数名字image,参数类型file,具体传什么看接口文档
  return uploadImage(fd).then(res => {
    return res.data.data.url
 })
}