Vue实现 上传文件到七牛云

html

<input @change="getpolicy($event)" type="file" accept=".png" :ref="refName" class="upInput" />

js
request是封装好的方法，qiniuyun是后端给的接口

  data() {
            return {
                qiniuUploadURL: 'http://up-z2.qiniu.com',
            }
        },
  methods: {
      getpolicy() {
          request(qiniuyun).then((res) => {
              if (res.code === "200") {
                  let files = this.$refs[this.refName].files
                  let length = files.length
                  for (let i = 0; i < length; i++) {
                      this.qiniuyunUpload(files[i], res.data)

                  }
              }
          });
      },
      qiniuyunUpload(file, qiniuyunToken) {
          let formData = new FormData();
          //注意formData里append添加的键的大小写
          formData.append('key', qiniuyunToken.key)
          formData.append('token', qiniuyunToken.token)
          //如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
          formData.append("file", file);
          axios.post(this.qiniuUploadURL, formData, {
              'Content-Type': 'multipart/form-data'
          }).then(res => {
              if (res.data.code == "200") {
                  this.$util.message("suc", "上传成功");
              } else {
                  this.$util.message("err", res.message);
              }
          })

      },
  }