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)

我在哪里弄错了？

Answer 1

为了显示图像，可以在图像完全上载到服务器后为src提供url，或者如果要在发送到服务器之前显示图像，则必须以base64格式编码文件，例如在数据中定义base64变量

    onChangeFileUpload ($event) {
      this.file = $event.files[0]
      this.encodeImage(this.file)
    },
    encodeImage (input) {
      if (input) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.base64Img = e.target.result
        }
        reader.readAsDataURL(input)
      }
    }

然后您可以检查文件是否已上传，应该直接从url查看图像，否则在base64中

<img :src="base64Img" />

Answer 2

这是生成图像的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));

      }

Vue.js图片上传表单数据

2 个答案: