form表单无刷新上传小技巧

最新推荐文章于 2019-06-21 20:43:13 发布

诗和远方的田野和永远都走不完的套路

最新推荐文章于 2019-06-21 20:43:13 发布

阅读量169

点赞数

本文链接：https://blog.csdn.net/qq_38476088/article/details/79272302

版权

去年有做阿里云直传，分享一些需要注意的小地方

let formData = new FormData();  new一个formData  或者  new FormData('#upload').files[0];
formData.append('OSSAccessKeyId', data.data.access_key_id); 参数加进去
formData.append('policy', data.data.policy);
formData.append('Signature', data.data.signature);
formData.append('key', data.data.file_prefix + files[0].name);
formData.append('file', files[0])  选择的文件
sessionStorage.setItem('key', data.data.file_prefix + files[0].name);
Ajax.ajax({
  url: uploadSrc,
  data: formData,
  type: 'post',
  dataType: 'json',
  cache: false,
  processData: false, //必选, 是file 上传进程
  contentType: false, //必选, 405错误根源
  headers: {
    'X-Requested-With': 'XMLHttpRequest', //options请求必带
  },
}).done(() => {
  const imgUrl = `${uploadSrc}/${sessionStorage.getItem('key')}`
  insert(imgUrl)
  console.log(imgUrl)
})


需要设置content-type为multipart/form-data，jq的contentType设为false是为了避免jq重写原来的content-type，那么就是说以一个new FormData()构造出来的对象作为post的数据发送，浏览器会自动将content-type设为multipart/form-data，并且自动加上boundary。