Ant Design upload 组件快速配置使用七牛云

12

在使用ant design开发后台业务过程中,遇到了给upload组件配置后台服务器的问题。因为用习惯了七牛云的快速易用,以及喜欢它的自动压缩接口,因此第一反应就是想怎么配置上传到七牛云上面。
不过经过多番搜寻,并没找到好的解决方案。官方推荐参考的jQuery-File-Upload服务端上传接口实现测试了几个nodejs的实现,发现很久没有维护了,存在一些问题。于是只能从阅读ant design源代码来看能不能怎么修改upload的上传方式,从而实现提交图片过去。

首先从ant design的upload组件源码可以看到,它是基于这个upload组件编写的。再看该upload组件,得到具体的request实现:

function getError(option, xhr) {
  const msg = `cannot post ${option.action} ${xhr.status}'`;
  const err = new Error(msg);
  err.status = xhr.status;
  err.method = 'post';
  err.url = option.action;
  return err;
}

function getBody(xhr) {
  const text = xhr.responseText || xhr.response;
  if (!text) {
    return text;
  }

  try {
    return JSON.parse(text);
  } catch (e) {
    return text;
  }
}

// option {
//  onProgress: (event: { percent: number }): void,
//  onError: (event: Error, body?: Object): void,
//  onSuccess: (body: Object): void,
//  data: Object,
//  filename: String,
//  file: File,
//  withCredentials: Boolean,
//  action: String,
//  headers: Object,
// }
export default function upload(option) {
  const xhr = new XMLHttpRequest();

  if (option.onProgress && xhr.upload) {
    xhr.upload.onprogress = function progress(e) {
      if (e.total > 0) {
        e.percent = e.loaded / e.total * 100;
      }
      option.onProgress(e);
    };
  }

  const formData = new FormData();

  if (option.data) {
    Object.keys(option.data).map(key => {
      formData.append(key, option.data[key]);
    });
  }

  formData.append(option.filename, option.file);

  xhr.onerror = function error(e) {
    option.onError(e);
  };

  xhr.onload = function onload() {
    // allow success when 2xx status
    // see https://github.com/react-component/upload/issues/34
    if (xhr.status < 200 || xhr.status >= 300) {
      return option.onError(getError(option, xhr), getBody(xhr));
    }

    option.onSuccess(getBody(xhr), xhr);
  };


  xhr.open('post', option.action, true);

  // Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179
  if (option.withCredentials && 'withCredentials' in xhr) {
    xhr.withCredentials = true;
  }

  const headers = option.headers || {};

  // when set headers['X-Requested-With'] = null , can close default XHR header
  // see https://github.com/react-component/upload/issues/33
  if (headers['X-Requested-With'] !== null) {
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  }

  for (const h in headers) {
    if (headers.hasOwnProperty(h) && headers[h] !== null) {
      xhr.setRequestHeader(h, headers[h]);
    }
  }
  xhr.send(formData);

  return {
    abort() {
      xhr.abort();
    },
  };
}

至此上传的逻辑一目了然,那么可以怎么改造呢?再翻阅一下七牛云的文档,得到一个利用js上传的实现:

/*
 *   本示例演示七牛云存储表单上传
 *
 *   按照以下的步骤运行示例:
 *
 *   1. 填写token。需要您不知道如何生成token,可以点击右侧的链接生成,然后将结果复制粘贴过来。
 *   2. 填写key。如果您在生成token的过程中指定了key,则将其输入至此。否则留空。
 *   3. 姓名是一个自定义的变量,如果生成token的过程中指定了returnUrl和returnBody,
 *      并且returnBody中指定了期望返回此字段,则七牛会将其返回给returnUrl对应的业务服务器。
 *      callbackBody亦然。
 *   4. 选择任意一张照片,然后点击提交即可
 *
 *   实际开发中,您可以通过后端开发语言动态生成这个表单,将token的hidden属性设置为true并对其进行赋值。
 *
 *  **********************************************************************************
 *  * 贡献代码:
 *  * 1. git clone git@github.com:icattlecoder/jsfiddle
 *  * 2. push代码到您的github库
 *  * 3. 测试效果,访问 http://jsfiddle.net/gh/get/jquery/1.9.1/<Your GitHub Name>/jsfiddle/tree/master/ajaxupload
 *  * 4. 提pr
 *   **********************************************************************************
 */
$(document).ready(function() {
    var Qiniu_UploadUrl = "http://up.qiniu.com";
    var progressbar = $("#progressbar"),
        progressLabel = $(".progress-label");
    progressbar.progressbar({
        value: false,
        change: function() {
            progressLabel.text(progressbar.progressbar("value") + "%");
        },
        complete: function() {
            progressLabel.text("Complete!");
        }
    });
    $("#btn_upload").click(function() {
        //普通上传
        var Qiniu_upload = function(f, token, key) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', Qiniu_UploadUrl, true);
            var formData, startDate;
            formData = new FormData();
            if (key !== null && key !== undefined) formData.append('key', key);
            formData.append('token', token);
            formData.append('file', f);
            var taking;
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var nowDate = new Date().getTime();
                    taking = nowDate - startDate;
                    var x = (evt.loaded) / 1024;
                    var y = taking / 1000;
                    var uploadSpeed = (x / y);
                    var formatSpeed;
                    if (uploadSpeed > 1024) {
                        formatSpeed = (uploadSpeed / 1024).toFixed(2) + "Mb\/s";
                    } else {
                        formatSpeed = uploadSpeed.toFixed(2) + "Kb\/s";
                    }
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    progressbar.progressbar("value", percentComplete);
                    // console && console.log(percentComplete, ",", formatSpeed);
                }
            }, false);

            xhr.onreadystatechange = function(response) {
                if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
                    var blkRet = JSON.parse(xhr.responseText);
                    console && console.log(blkRet);
                    $("#dialog").html(xhr.responseText).dialog();
                } else if (xhr.status != 200 && xhr.responseText) {

                }
            };
            startDate = new Date().getTime();
            $("#progressbar").show();
            xhr.send(formData);
        };
        var token = $("#token").val();
        if ($("#file")[0].files.length > 0 && token != "") {
            Qiniu_upload($("#file")[0].files[0], token, $("#key").val());
        } else {
            console && console.log("form input error");
        }
    })
})

通过审阅其中的核心逻辑可以知道,*它的上传逻辑与antd 的upload组件的核心区别就是formData增加了七牛云上传token:

formData.append('token', token);

而通过upload的request源码又可以知道,可以通过option.data传过来的参数执行formData.append('token', token);,该部分的源码如下:

const formData = new FormData();

  if (option.data) {
    Object.keys(option.data).map(key => {
      formData.append(key, option.data[key]);
    });
  }

由此,再参阅ant design官方文档可以知道,使用Upload组件时,可以通过data API传入自定义的data,那么自此就可以得到一个简洁的办法,通过以下sample code就可以实现Upload组件上传图片到七牛云:

const QINIU_SERVER = 'http://up.qiniu.com'
data = {
    token: 'PUT-YOUR-TOKEN-HERE',
  }
<Upload
    action={QINIU_SERVER}
    listType="picture-card"
    className="upload-list-inline"
    onChange={this.onChange}
    onPreview={this.handlePreview}
    fileList={fileList}
    data={this.data}
    >
        {uploadButton}
</Upload>

最后划重点:

BTW, 如果使用的是七牛云其他地区如华南地区的Bucket,需要替换使用其他地区的上传域名进action,具体可参考这里
Enjoy it!

你可能感兴趣的

12 条评论
Wanxger · 2017-09-19

该方法在华东区域亲测有效,在华南地区无效。

回复

0

华南地区使用七牛云的华南上传域名http://up-z2.qiniup.com,其他地区可以参考https://developer.qiniu.com/k...

Anderson_liu 作者 · 2017-09-20
0

谢谢,成功了^_^

Wanxger · 2017-09-20
0

上传成功返回的是什么啊

称职小书童 · 2017-11-09
b_zhang · 2018-01-29

感谢楼主

回复

Iron_lady · 2018-04-19

你有遇到七牛云上传成功之后,服务器端给返回了一个不是.png/.jpg的链接,此时要给upload的fileList赋值回显,这时upload的file显示不了图片这样的问题吗?

回复

0

我遇到了,你怎么解决的啊

张先生 · 2018-05-24
0

我是把图片链接转换成了base64格式,图片会有一点延迟

Iron_lady · 2018-06-04
文武双全 · 2018-04-27

我试了下,没有引入七牛js,报跨域的错

回复

安逗 · 2018-05-29

每次在上传之前就要向后端请求token,然后放到data参数里面,你这个是固定的。

回复

载入中...