axios跟vant-uploader组件配合上传附件,传参问题

251 阅读1分钟

header设置Content-Type:'multipart/form-data'

const axios = require('axios')
const service = axios.create({
  baseURL: 'https://xxx/attachment/',
  timeout: 5000
})
service.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'multipart/form-data'
    config.headers['Accept'] = '*/*'
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)
service.interceptors.response.use(
  response => {
    console.log(response, `:::response`)
  },
  error => {
    console.log(error, `:::error`)
    return Promise.reject(error)
  }
)

Vue:

<van-uploader v-model="fileList" multiple :after-read="afterRead" />
export default {
    name:'index-page',
    data(){
        fileList:[],
    },
    methods: {
        afterRead(file,info){
           ile.status = 'uploading'
           file.message = '上传中...'
            const source = 'event' // 项目自己定义的
            const type = 'handle' // 项目自己定义的
            const data = new FormData() 1// 文件流
            data.append('filedata', file.file)
            const params = {
              source,
              type
            }
           request({
               url: 'fileUtil/uploadFile',
               headers: {
                 'Content-Type': 'multipart/form-data'
               },
               method: 'post',
               data,
               params
            })
            .then(res => {
              console.log(res, 'res 后端返回的数据,一般包含附件的id、fileName、url之类信息')
              file.status = 'done'
              file.message = '上传完成'
            })
            .catch(err => {
              console.log(err, `:::err`)
              file.status = 'failed'
              file.message = '上传失败'
            })
        }
    }
}

注意:Chrome控制台,请求成功后的参数格式:

1.png 传参注意data跟params分开传,浏览器Playload下,Query String Parameters对应params的参数;Form Data对应new FormData()处理过的data(filedata)。