上传文件fetch,post

先不要想收获，扎实

于 2021-12-15 11:13:54 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue vue3 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_41820930/article/details/121946228

vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍了如何使用Element UI实现文件上传，并通过FormData发送到后端服务器。通过FJ_Upload事件处理POST请求，包括设置文件参数和处理服务器响应。重点在于`http-request`配置和`Content-Type`自动设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

			<el-upload
              action="#"
              :http-request="FJ_Upload"
              :limit="3"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>

data() {
    return {
      fileList: [],
      form: {
        appName: "",
        version: "",
        operationName: "",
        uploadTime: "",
      },
    };
  },

  // 上传事件
FJ_Upload(param) {
    		var formData = new FormData();
			formData.append('appFile', param.file);
    		formData.append("version",this.form.version);
    		this.flieParam = formData;
},
//确定时间
async submintNew() {
      const that = this;
      const res = await fetch('http://192.168.2.xx:8083/im/saveImAppInfo', {
       method: 'post',
       body: this.flieParam,
       })
      // if (res.downloadUrl) {
      //   that.$message.success('获取数据成功');
      //   this.form = Object.assign(this.form , res)
      // } else {
      //   that.$message.error('暂无数据');
      // }
    },

在这里插入图片描述

fetch:的请求头不需要设置,post 就需要’Content-Type’: ‘multipart/form-data’

headers: {
        'Accept': 'application/json',
        //不需要写'Content-Type': 'multipart/form-data',自动是form -data
        // 'Content-Type': 'multipart/form-data',
      },