使用 jquery 将文件上传到 Slack API files.upload

Question

我正在尝试在网页上 select 一个文件，然后通过 Slack API.

在 Slack 中 post 它

我原来在做：

var request = require('request');
$(".submit").click(function(){
    request.post({
    url: 'https://slack.com/api/files.upload',
    formData: {
        token: "myTokenHere",
        title: "Image",
        filename: "image.png",
        filetype: "auto",
        channels: "mychannel",
        file: document.getElementById('idofuploadelement').files[0]
    },
}, function (err, response) {
    console.log(JSON.parse(response.body));
});

然后我转而尝试 Ajax 这样我就不必包含 require.

$(".submit").click(function(){
$.ajax({
    type: "POST",
    method: "POST",
    enctype: "multipart/form-data",
    url: 'https://slack.com/api/files.upload',
    formData: {
        token: "myTokenHere",
        title: "Image",
        filename: "image.png",
        filetype: "auto",
        channels: "mychannel",
        file: document.getElementById('idofuploadelement').files[0]
        }   
}).done(function(url) {
    console.log(url);
            });
});

但这给了我控制台警告 Form contains a file input, but is missing method=POST and enctype=multipart/form-data on the form. The file will not be sent. 即使我有这些属性（在添加它们之前我也得到了错误），我仍然得到错误。

我的html很简单html5个输入标签（用于上传和提交按钮）

<input type="file" name="fileToUpload" id="idofuploadelement">
<input type="submit" name="submit" class="submit action-button next" value="Next"/>

简而言之，我试图在不启动服务器的情况下将文件发送给我（以任何方式，Slack、Github、电子邮件，等等）。可能吗？

Answer 1

想通了：

HTML:

<form id="myform" method="POST" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="file-select">
    <input id="upload-button" type="submit" name="submit" class="submit action-button next" value="Next"/>
</form>

JS:

var form = document.getElementById('myform');
var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('upload-button');
form.onsubmit = function(event) {
    event.preventDefault();
    // Update button text.
    uploadButton.innerHTML = 'Uploading...';
    var file = fileSelect.files[0];
    var formData = new FormData();
    formData.append('file', file, file.name);
    formData.append('token', insert_token_here);
    formData.append('channels', insert_channel_here);
    var xhr = new XMLHttpRequest();
    xhr.open('POST','https://slack.com/api/files.upload', true);

    // Set up a handler for when the request finishes.
    xhr.onload = function () {
      if (xhr.status === 200) {
        // File(s) uploaded.
        uploadButton.innerHTML = 'Uploaded';
      } else {
        alert('An error occurred!');
      }
    };
    xhr.send(formData);
}

使用 jquery 将文件上传到 Slack API files.upload

Uploading file to Slack API files.upload with jquery

javascript

ajax

jquery

slack-api

slack