实现原生input、vant——Uploader、react——Upload三种方式上传图片

如何上传图片

不管是利用 jQuery.ajax()还是fetch，上传图片总体流程就是利用formData里的append方法添加图片，然后将formData传给data。

在react框架中原生input利用fetch上传图片

首先定义一个input和button，multiple代表多张图片可以一起上传

<input type="file" id="file" multiple />
<Button type="primary" className="publish" onClick={this.publish}>发布</Button>

定义publish方法

  publish = () => {
    
    
    var file=document.getElementById("file");
    var formData = new FormData();
    if (file.files.length != 0) {
    
    
      for (var i = 0; i < file.files.length; i++) {
    
    
         formData.append("image", file.files[i]);
       }
     } else {
    
    
       formData.append("image", "");
    }
    fetch("/notice/send", {
    
    
      method: "POST",
      headers: new Headers({
    
    
        "Access-Control-Allow-Origin": "*",
        "User-Token": this.state.token,
      }),
      contentType: false,
      processData: false,
      body: formData,
    })
      .then((res) => {
    
    
        return res.json().then((response) => {
    
    
          console.log(response);
        });
      })
      .catch((error) => {
    
    
        console.error(error);
      });
  };

在vue中vant的Uploader组件利用jQuery.ajax()上传图片

引入vant的Uploader组件，可以通过vant官方文档的方法手动按需引入组件，但是本例子是通过CDN引入<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" />和<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

1、编写van-uploader

<van-uploader v-model="fileList" multiple class="imgs" />
<van-button type="info" class="btn" onclick="send()">发布</van-button>

2、定义send方法

function send() {
    
    
    if (vm.fileList != []) {
    
    
        for (var i = 0; i < vm.fileList.length; i++) {
    
    
            formData.append("image", vm.fileList[i].file);
        }
    } else {
    
    
        formData.append("image", '');
    };
    $.ajax({
    
    
        type: 'post',
        headers: {
    
    
            "User-Token": vm.token,
        },
        url: 'http://xxx.xx.xxx.xx:8080/post/send',
        contentType: false,
        processData: false,
        data: formData,
        success: function(data) {
    
    
            alert(JSON.stringify(data));
        },
        fail: function(data) {
    
    
            alert(JSON.stringify(data));
        }
    })
}

注意：当使用vant的Uploader时，formData.append()图片时，必须append的是fileList的file

在react中使用Antd的Upload进行fetch图片上传

详细Upload配置请按照Antd的官方文档的Upload进行配置。
这里直接上接口代码：

publish = () => {
    
    
  if (this.state.fileList.length != 0) {
    
    
    for (var i = 0; i < this.state.fileList.length; i++) {
    
    
      formData.append("image", this.state.fileList[i].originFileObj);
    }
  } else {
    
    
    formData.append("image", "");
  }
  fetch("/notice/send", {
    
    
    method: "POST",
    headers: new Headers({
    
    
      "Access-Control-Allow-Origin": "*",
      "User-Token": this.state.token,
    }),
    contentType: false,
    processData: false,
    body: formData,
  })
    .then((res) => {
    
    
      return res.json().then((response) => {
    
    
        console.log(response);
      });
    })
    .catch((error) => {
    
    
      console.error(error);
    });
};

在这里我碰到一个问题：在fetch的过程中，虽然上传成功，但是图片并没有被添加到数据库，因为在后台Network的Headers下，FormData的image从(binary)变成了[object Object]

解决方案：
formData要append的不是整个fileList，而是fileList的originFileObj。

formData.append("image", this.state.fileList[i].originFileObj);

这样Antd的Upload才能上传成功图片