Axios 上传文件到七牛云的坑坑洼洼

2019-05-18

Axios 上传文件到七牛云的坑坑洼洼

需求

上传文件也就当初还在用php写前端得时候, 直接使用form, 然后button submit提交到后台上去. 后面使用微信小程序提交文件得时候也就跟简单咯, 直接调用官方sdk就可以了, 这次由于项目上需要使用vue这种面向mvvm的框架直接上传文件, vue的核心就是不操作DOM, 所以我们最好也要尊重vue的设计核心思想嘛.

本来element这些框架是有封装好的上传组件, 使用起来也非常的方便api友好. 不过考虑到我本次项目追求的是轻量简洁, elementUi暂时不做考虑.

百度查询了一下资料, vue中上传文件一半都是在 input 上绑定@change=”handleFileChange” 事件, 然后在handleFileChange函数中New一个formData对象将我们需要上传的内容append添加好, 通过axios直接post发送到服务器上. OK 流程知道了那就开动吧

实操

先写一个inpu type为file类型的文件选择输入框

1	<input type="file" @change="handleFileChange" ref="upload">

接下来直接也对应的函数

handleFileChange(){
    // 通过DOM取文件数据
    let file = this.$refs.upload.file[0];
    // 在vue中需要添加上 window, 否则会提示FormData undefined
    let formData = new window.FormData();
    formData.append('file', file)
    // token 是七牛云需要的口令字符串, 一般由后台生成前端区调用, 当然前端也可以生成但是密钥 appkey 会有被泄露的风险
    formData.append('token', this.token)
    // 这离是可选的, 本地规定七牛云的储存路径
    formData.append('key', this.key)
    // 这里我们直接打印formData会直接输出空对象 formData我们需要formData.get(key)
    console.log(formData.get('file'))
    // $ajax 是我挂载在vue上的axios对象
    this.$ajax({
        url: 'http://upload-z2.qiniup.com',
        data: formData,
        method: 'POST',
    }).tehn((res)=>{
        console.log(res)
    })
}

理论上做到这个地步应该就可以了嘛, 但是我们跑一下 ..会直接报 400

1	{error: "invalid multipart format: request Content-Type isn't multipart/form-data"}

Content-Type不是Form-data ??? 作为一个半吊子程序猿, 这些错误是完全不认识的. 中鞥依靠万能的百度, 搜了一下啊,说是要在请求的header中定义Conten-type属性.
查看一下本次请求的header信息.

1	Content-Type:application/x-www-form-urlencoded

试着在$ajax添加一句

1	headers:{'Content-Type':'multipart/form-data'}

ctrl + s 刷新重试, 还是400 …emmm

1	{error: "invalid multipart format: no multipart boundary param in Content-Type"}

没有boundary param ???, 百度了一下, 原来七牛云需要boundary这个参数

试着将头部信息改成这样

1	headers:{'Content-Type':'multipart/form-data; boundary='+ new Date().getTime()}

1	{error: "invalid multipart format: multipart: NextPart: EOF"}

—– emmmm 实在搞不懂了, 我们不用axios上传的时候完全没有问题嘛, 接着百度搜了一下, 原来axios在请求的时候会拦截我们的headers. 我们可以直接creat 一个干净的axios对象进行提交

// 重新导入axios, 不能直接使用挂载到vue上的
import axios form 'axios'
  ... 
  //  withCredentials 当前请求为跨域类型时是否在请求中协带cookie
const axios = axios.create({withCredentials: false})
// 然后再愉快的直接进行提交就OJ8K了
axios({
    url: 'http://upload-z2.qiniup.com',
    data: formData,
    method: 'POST',
}).tehn((res)=>{
    console.log(res)
})

Ctrl + S 随便丢张图这些终于200咯

最后代码

<!-- accept 在网上看到x5内核浏览器上会出现选择图片无效的情况, 需要设置accept属性 "image/jpeg, image/png, image/gif" -->
 <input type="file" id="upload" class="upload-input" @change="handleFileChange" ref="upload" accept="image/*">
 <!-- 在label中 for可以直接指向input的id, 这样就可以直接点击label进行选择文件, 把input元素隐藏 -->
  <label class="upload-img" for="upload" @click="choose(index)">
    <img src="imgUrlArr[index]" alt="upload">
   </label>
<script>
import axios form 'axios'
  ...
  handleFileChange(){
      // 通过DOM取文件数据
      this.file = this.$refs.upload.files[0];
      let size = Math.floor(this.file.size / 1024); // 换算为KB
      if (size > 500) {
        // 这里可以加个文件大小控制
        alert("请选择小于500k的文件")
        return false
      }
      // 触发这个组件对象的input事件
      // 这里就可以获取到文件的名字了
      let filename = this.file.name.split('.')
      let formData = new window.FormData()
      formData.append('file', this.file)
      formData.append('token', this.token)
      formData.append('key', keyname)
      // 创建一个干净的axios
      let $upload = axios.create({withCredentials: false});
      $upload({
        url: 'http://upload-z2.qiniup.com',
        data: formData,
        method: 'POST',
        onUploadProgress: (progressEvent)=> {
           //imgLoadPercent 是上传进度，可以用来添加进度条
          let imgLoadPercent = Math.round(progressEvent.loaded * 100 / progressEvent.total);
        },
      }).then((res)=>{
        console.log(res)
      }).catch((res)=>{
        console.log(res)        
      })
  }
  
</script>

总结一下

都是axios的锅, 不是我太菜. 对全是axios的错

input中如果两次同时选择同一个文件不会触发@change事件. 所以我们每一次上传完成后就可以清空一下input

1	this.$refs.upload.value = null