Question

我在Laravel工作。我需要使用Vuejs上传文件。但它不起作用。我添加以下代码：

刀片（文件上传）：

<input class="form-control" type="file" >

脚本Vuejs： var app = new Vue（{ el：“＃app”，

data: {
person: {
        id: 0,
        user_name:'',
        position_id:'',
        image:'',
        },
        },


    methods: {
      addPerson: function () {
        axios.post('/addperson', this.person)
            .then(response => {
                console.log(response.data);
                if (response.data.etat) {
                    this.person = {
                         id: 0,
                          user_name: response.data.etat.user_name,
                          position_name: response.data.etat.position_id,
                          image: response.data.etat.image
                    };
                }

            })
            .catch(error => {
                console.log('errors: ', error)
            })
    },

控制器：

public function addPerson(Request $request){
$person = new Person;

$person->user_name=$request->user_name;
$person->position_id=$request->position_id;
 if($request->hasFile('photo')){
     $person->image= $request->image->store('image');
    }
$person->save();

return back()->with('success', 'New Position added successfully.');

我的Axios发布功能在没有图像上传行代码的情况下正常工作。我只是不知道如何添加上传代码。

如果有人可以帮助，谢谢。

Answer 1

在刀片文件中

<input type="file" @change="onFileChange" name="id_image" id="id_image" class="inputFile">

在您的vue.js文件中的方法下：

    onFileChange(e) {
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            },

createImage(file) {
            let reader = new FileReader();
            reader.onload = (e) => {
                this.person.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },

这应该允许您的axios代码上传图像。请注意，它是在base64中上传的，因此，如果需要验证器，则必须为base64图像创建自定义验证器。

Answer 2

我努力寻找方法，但是现在我找到了一种方法。希望这可以使某人的生活更轻松（我在mixin中有uploadUserImage方法）：

HTML： <input type="file" @change="uploadImage($event)">

JS：

uploadImage (e) {
      this.file = e.currentTarget.files[0]
      let formData = new FormData()
      formData.append('img', this.file)
      this.uploadUserImage(formData)
}

    uploadUserImage: function (formData) {
      axios.post('http://snowdon-backend.local:8000/api/users/img', formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then(function (response) {
          console.log(response)
        })
    }

还要确保在数据方法中也设置了file：

data () {
    return {
      file: ''
    }
  }

用Vuejs上传文件

2 个答案: