原创 [axios] Vue文件流上传文件

分类:JavaScript 浏览:1,811次
[axios] Vue文件流上传文件

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)
})

参考:

作者: JaneCC最后编辑于:2017-06-11 17:58
坚持把简单的事情做好就是不简单,坚持把平凡的事情做好就是不平凡。所谓成功,就是在平凡中做出不平凡的坚持。

--JaneCC

众说纷纭Comments3条留言

  1. 沙发
    :

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

    来自Google Chrome 61.0.3159.5Windows 10的精彩回复 [回复]
    • :

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

      来自Google Chrome 60.0.3112.113Windows 7的精彩回复 [回复]
      • :

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

        来自Google Chrome 61.0.3141.7Windows 7的精彩回复 [回复]

发表感言