七牛form表单上传文件

最新推荐文章于 2025-10-11 10:15:27 发布

原创最新推荐文章于 2025-10-11 10:15:27 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用Vue.js进行图片上传的方法，通过调用七牛云API获取上传凭证并实现多文件批量上传。文章提供了完整的代码示例，包括获取token及上传逻辑。

import Vue from 'vue'
//向服务器获取七牛token，这应该用promiss，待优化
function qiniuToken(cb) {
  Vue.http.get("common/get_qiniu_token.do").then(data => {
    cb(data.body)
  })
}
/**
 * @param {*} f  input文件数组  这应该传入form表单待优化
 * @param {*} token  token
 * @param {*} key  用来设置上传文件名称，不传会用图片md5
 * @param {*} cb 回调
 */
function imgUpdate(f, token, key, cb) {
  let _arr = []
  for (let i = 0; i < f.length; i++) {
    update(f[i], token, key, function (res) {
      _arr.push(res);
      if (_arr.length == f.length) {
        cb(_arr)
      }
    })
  }
}

function update(f, token, key, cb) {
  console.log(f)
  var Qiniu_UploadUrl = "http://up-z2.qiniu.com";
  var xhr = new XMLHttpRequest();
  xhr.open('POST', Qiniu_UploadUrl, true);
  var formData, startDate;
  formData = new FormData();
  if (key !== null && key !== undefined && key !== '') {
    formData.append('key', key)
  };
  formData.append('token', token);
  formData.append('file', f);
  var taking;
  xhr.onreadystatechange = function (response) {
    console.log(xhr)
    if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
      var blkRet = JSON.parse(xhr.responseText);
      if (cb) {
        cb(blkRet)
      }
    }
  };
  xhr.send(formData);
}
export {
  qiniuToken,
  imgUpdate
}