Vue

[axios] Vue文件流上传文件

2017-6-11 1793字 26,159

npm地址

初始化API

import axios from 'axios'
import qs from 'qs'

const http = axios.create({
    // baseURL: 'http://api-test.matixiang.com',
    timeout: 1000,
    headers: {  
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    transformRequest: [function (data) {
        return qs.stringify(data)
    }
    ],
    paramsSerializer: function (data) {
        return qs.stringify(data)
    }
})
export default http

#在main.js引入api.js
window.$http = Vue.prototype.$http = http

文件流上传图片

# html
<form id="formid">
    <label for="resource">上传文档</label>
    <input type="file" id="resource" name="resource" ref="resource">
    <button type="button" @click="upload()">上传</button>
</form>

JavaScript

var formData = new FormData() // FormData 对象
formData.append('file', this.$refs.resource.files[0])
this.$http.post('http://192.168.1.200:3001/api/upload/sina', formData, {
    method: 'post',
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    transformRequest: [function (data) {
        return data
    }],
    onUploadProgress: function(e) {
        let percentage = Math.round((e.loaded * 100) / e.total) || 0
        console.log(e, percentage)
    }
}).then((response) => {
    if (response.data.status) {} else {
        this.$Notice.error({
            title: '错误',
            message: response.data.imgId
        })
    }
}).catch(function (error) {
    console.log(error)
})

参考:

版权声明:Shire 发表于 2017-6-11
转载请注明: [axios] Vue文件流上传文件 | Shire

评论 (5)

  1. MArc     Windows 10 /    Google Chrome

    太感谢了, 我花了大半天时间, 找这个axios的跨域文件上传的问题....发现得救之道, 就在你的页面中, 谢谢...

    广东省深圳市 回复
    1. JaneCC     Windows 10 /    Google Chrome

      @MArc : 客气

      安徽省合肥市 回复
  2. jerry     Windows 10 /    Google Chrome

    你这个代码高亮效果很不错,用的是什么插件?

    上海市上海市 回复
    1. JaneCC     Windows 7 /    Google Chrome

      @jerry : prism.js 这个高亮库,支持自定义,用的还是蛮不错

      安徽省合肥市 回复
      1. jerry     Windows 7 /    Google Chrome

        @JaneCC : 我也用上了,比之前的效果好多了。谢谢

        上海市上海市 回复

该文章已经关闭评论