问答

vue 使用form表单上传文件,传给后端的值是空的??

作者:admin 2021-06-08 我要评论

HTML页面代码: form enctype="multipart/form-data" input type="file" id="fileId" ref="file" style="display: none;" v-on:change="handleFileUpload($event...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

HTML页面代码:

 <form enctype="multipart/form-data">
                <input type="file" id="fileId" ref="file" style="display: none;" v-on:change="handleFileUpload($event)">
            </form>

上传文件的方法:

 handleFileUpload(event){
                // 阻止发生默认行为
                event.preventDefault();
                this.mdl.pic = this.$refs.file.files[0].name
                let formData = new FormData()
                let file = this.$refs.file.files[0]
                formData.append('file',file)
                console.log(formData.get('file'))
                this.onUpload(formData)
            },
            // 上传文件
            onUpload (formData) {
                postUpload(formData).then((res) => {
                    console.log(res)
                }).catch((e) => {
                    this.$message.error(e.message)
                })
            }

axios请求:

export function postUpload (file) {
    return axios({
        url: 'upload',
        method: 'post',
        data: {
            file
        },
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}
###

image.png

###

文件流需要使用new FormData进行储存file文件,然后使用formData格式化进行传递到后端;

let formData = new FormData();
formData.append('file', file)
axios({
    url: 'upload',
    method: 'post',
    data: formData,
    headers: {
        'Content-Type': 'multipart/form-data'
    }
}).then(res => {
    console.log(res)
})
###

检查下是否有多个 axios 实例 这样会导致header 头部boundr被自动修改
如果有多个尝试下 axios = axios.create()

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue 使用form表单上传文件,传给后端的

    vue 使用form表单上传文件,传给后端的

  • iview+typescript +vue 使用Message组

    iview+typescript +vue 使用Message组

  • ipad 唤醒展示指定页面不让用户进行其

    ipad 唤醒展示指定页面不让用户进行其

  • react-antd的dropdown鼠标移上去报错

    react-antd的dropdown鼠标移上去报错

腾讯云代理商
海外云服务器