一、 多个二进制流附件以数组格式上传公共方法

// httpRequest.js
import Vue from 'vue'
import axios from 'axios'

/**
 * 多个二进制流附件以数组格式上传
 * @param {*} url 请求接口路径
 * @param {*} params 请求参数
 * @returns 接口响应
 */
var uploadFileList = function (url, params) {
  let config = {
    // 添加请求头
    headers: {
      'Content-Type': 'multipart/form-data',
      'Authorization': Vue.cookie.get('Authorization_vs') // 请求头带上token
    }
  }
  // 一般参数可以正常序列化并传递,传文件的文件流是无法被序列化并传递的;
  // 使用formData对象序列化要传递的参数,就可以进行文件上传了。
  let param = new FormData()
  // 通过append向form对象添加数据
  Object.keys(params).forEach(key => {
    const val = params[key]
    // 附件是以二进制流数组格式传进来,拆分成一个个相同key的项,放在载荷里面给后端上传;
    // 但后端实际上收到的还是一个数组,只不过前端载荷是若干个相同key的参数。
    if (Array.prototype.isPrototypeOf(val)) {
      val && val.map(file => {
        param.append(key, file)  
      })
    } else { // 其他参数正常key上传
      param.append(key, val)
    }
  })
  return axios.post(url, param, config) // post请求(可以改成get请求)
}

export { uploadFileList } // 抛出去这个方法,供其他特殊页面使用

二、单页面使用公共方法

// xxx.vue

// 引入附件上传方法
import { uploadFileList } from '@/utils/httpRequest.js'

// 请求参数
const params = {
	id: 433,
	refundPrice: 1.02,
	refundReason: 参数1,
	file: [file1, file2]
}
// 参数+附件上传+成功/失败提示
uploadFileList(
  this.$http.adornUrl('url/url/url'),
  params
).then(({ data }) => { // 接口调用成功 - 走then - 响应数据
  this.$message({
    message: '操作成功',
    type: 'success',
    duration: 1500,
    onClose: () => {}
  })
}).catch(err => { // 接口调用失败 - 走catch - 错误信息
  // 打印见下图
  console.log('err', err)
  console.log('response', response)
  // 错误处理方式 - 这边只是做了一个提示,根据需要进行相关改动
  var message = '操作失败'
  const response = err.response
  if (response.status == 400) {
    message = response.data // 错误码为400,提示后端返回的错误信息
  } else if (response.status == 500) {
    message = '服务器异常' // 错误码为500,提示服务器异常
  }
  this.$message({
    message: message,
    type: 'error',
    duration: 1500,
    onClose: () => {}
  })
})

请求报错提示err、err.response
在这里插入图片描述

三、效果展示+载荷说明

1、示例页面展示:
在这里插入图片描述

2、前端请求载荷:
按理说请求参数对象是不应该有两个相同key值存在的,file是以二进制文件流数组格式上传的,在这里展示的是两个相同的key值,但实际上是数组的格式传输数据的。
在这里插入图片描述
2、数据传输是以包的形式传递的:
前端看起来像是两个重复的key进行传参的,但后端接收到的就是一个file数组,具体形式如下:
在这里插入图片描述

能想得到的,就能实现的了~~

Logo

前往低代码交流专区

更多推荐