Ruoyi框架上传文件

news2024/11/24 11:39:38

axios资料：axios中文文档|axios中文网 | axios

axios+json 默认情况下，axios将JavaScript对象序列化为JSON。

    submit(data) {
      if (data && this.definitionId) {
        // 启动流程并将表单数据加入流程变量
        startProcess(this.definitionId, JSON.stringify(data.valData)).then(res => {
          this.$modal.msgSuccess(res.msg);
          this.$tab.closeOpenPage({
            path: '/work/own'
          })
        })
      }

// 部署流程实例
export function startProcess(processDefId, data) {
  return request({
    url: '/workflow/process/start/' + processDefId,
    method: 'post',
    data: data
  })
}

what about?

form-data？？？

1.axios+formData

2.当使用axios进行网络请求时，默认传递参数格式为json，如果想改为form-data，axios中有个方法transformRequest（不传递文件的情况下可以把json对象统一转换成form-data格式）

    //此处以下为重点
    //headers中的content-type 默认的大多数情况是  application/json，就是json序列化的格式
    config.headers['Content-Type'] = 'application/json'
    //为了判断是否为formdata格式，增加了一个变量为type,如果type存在，而且是form的话，则代表是formData的格式
    if (config.type && config.type === 'form') {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
      //data是接收的数据，接收的数据需要通过qs编码才可以直接使用
      if (config.data) {
        config.data = qs.stringify(config.data)
      }
    }

import request from '@/utils/request'

// 注册模型信息
export function register(data) {
  return request({
    url: '/configuration/register/file',
    method: 'post',
    data:data
  })
}

submitForm() {
        // TODO 提交表单
        // 要绑定ref属性本地上传文件之后会把文件存在这里面  this.$refs.upload.uploadFiles
        let files = this.$refs.upload.uploadFiles;
        console.log(files);
        if(files.length>0){
          const formData = new FormData();//  用FormData存放上传文件
          files.forEach((file) => {
          formData.append("file", file.raw);
        })
        register(formData).then((res) => {
           console.log(res);
           this.$message.success("注册成功");
        })
        }
      },

附加：

四种常见的 POST 提交数据方式

（转载传递参数格式为form-data与json的区别，以及ajax、axios、fetch请求的方式-CSDN博客）

1.application/x-www-form-urlencoded

表单格式提交数据，通过form标签的action属性，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据

2.multipart/form-data（文件上传）

这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，就要让 form 的 enctype 等于这个值。

3.application/json

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

4.text/xml

相比于JSON，XML不能更好的适用于数据交换，它包含了太多的包装, 而且它跟大多数编程语言的数据模型不匹配，让大多数程序员感到诧异，XML是面向数据的，JSON是面向对象和结构的，后者会给程序员一种更加亲切的感觉。

我们现在一般这样来使用：
1、XML 存储数据，存储配置文件等需要结构化存储的地方使用；

2、数据传输、数据交互使用JSON；
下面就是ajax Content-Type为text/xml的请求：