vue.js - Vue.js 图片上传表单数据

Question

我正在尝试在 Vue.js 中上传图像并使用 axios 将其发送到服务器，但我遇到了一些错误。

首先：

我正在尝试像 formData 一样发送它。不是 base64 格式。

这是我的输入：

<label>File
   <input type="file" id="file" ref="file" v-on:change="onChangeFileUpload()"/>
</label>
<button v-on:click="submitForm()">Upload</button>

这是我的数据层和方法：

export default {
  data() {
    return {
      file: ''
           }
       },
        methods: {
           submitForm(){
            let formData = new FormData();
            formData.append('file', this.file);

            this.axios.post('apiURL',
                formData,
                {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'token': '030303039jddjdj'
                }
              }
            ).then(function(data){
              console.log(data.data);
            })
            .catch(function(){
              console.log('FAILURE!!');
            });
      },

      onChangeFileUpload(){
        this.file = this.$refs.file.files[0];
      }
    }
    }

我正在尝试在发送到服务器之前显示图像。

<img :src="file" /> 

但我无法显示图像

我收到错误：

[object%20File]:1 GET http://localhost:3000/[object%20File] 404 (Not Found)

我在哪里弄错了？

标签： vue.jsform-data

Answer 1

这是生成图像的codepen。

https://codepen.io/Atinux/pen/qOvawK

试试这个文件上传。

uploadFile(){
        let fd = new FormData();
        fd.append("file", this.file);

        this.axios.post('/uploadFile',fd,{
         headers: { 'Content-Type': undefined,
         'Authorization': `Bearer ${this.token}` },
        }).then(function (response) {
          if (response.data.ok) {
          }
        }.bind(this));

      }