使用vue.js在laravel中上载照片时出错

我正在使用laravel和vuejs以及vue路由器制作一个单页应用程序。我正在为我的http请求使用

api.php

路由。每当我在带有图像的

news

表中保存数据时，它都会显示一个错误。我需要用这个做什么？ NewsController.php

<?php

namespace App\Http\Controllers\API;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\News;
class NewsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return News::latest()->paginate(10);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required|string|max:191|unique:news',
            'subtitle' => 'required|string|max:191',
            'body' => 'required|string',
            'image' => 'image|mimes:jpeg,png,jpg,gif,svg,PNG|max:2048',
        ]);


        $news = new News;
        $news->title = $request->title;
        $news->subtitle = $request->subtitle;
        $news->body = $request->body;
        if ($request->hasFile('image')){
            //Add new photo
                $image = $request->file('image');
                $filename = time() . '.' . $image->getClientOriginalExtension();
                $location = public_path('img/news/' . $filename);
                \Image::make($image)->resize(300,300)->save($location);

                $oldFilename = $news->image;
            //Update DB
                $news->image = $filename;
             //Delete the old photo
                // Storage::delete($oldFilename);
        }

        $news->save();
    }
}

---

您是否检查了您的应用程序是否使用了多部分/表单数据编码

编辑：

将此代码放在Vue文件中

导出默认值{
数据（）{
返回{
新闻：{}，
表格：新表格({
id:“”，
标题：“，
副标题：“，
正文：“，
图像：“”，
发信人：“
})
}
},
方法：{
更新图像（e）{
让file=e.target.files[0]；
console.log（文件）；
let reader=new FileReader（）；
如果（文件[“大小”]<211775）{
reader.onloadend=文件=>{
this.form.image=reader.result；
};
reader.readAsDataURL（文件）；
}否则{
喷火({
键入：“错误！”，
标题：“哎呀……”，
文本：“您正在上载一个大文件”
});
//返回[“警告”，“文件大小”]；
火灾。$emit（“刷新页面”）；
}
},
loadNews（）{
axios.get（'api/news'）
.然后（（{data}）=>（this.news=data））
},
createNews（）{
这是。$Progress.start（）
此.form.post（“api/新闻”）
.然后（（）=>{
$（“#添加新闻”）.modal（“隐藏”）
$（“.modal background”）.remove（）
swal.fire（“创建！”、“成功”）
})
这是。$Progress.finish（）
},
},
创建（）{
console.log（'组件已安装'）
this.loadNews（）
}
}

您的控制器代码是

<?php

namespace App\Http\Controllers\API;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\News;
class NewsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return News::latest()->paginate(10);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required|string|max:191|unique:news',
            'subtitle' => 'required|string|max:191',
            'body' => 'required|string',
            'image' => 'image|mimes:jpeg,png,jpg,gif,svg,PNG|max:2048',
        ]);


        $news = new News;
        $news->title = $request->title;
        $news->subtitle = $request->subtitle;
        $news->body = $request->body;
        if ($request->hasFile('image')){
$name = time().'.'.explode('/',explode(':',substr($request->image,0,strpos($request->image,';')))[1])[1];
                    \Image::make($request->image)->save(public_path('img/news/').$name);


            //Update DB
                $news->image = $name ;

        }

        $news->save();
    }
}

---

im只使用了一个名为
vform
的包，我按照那里的说明进行了操作，我可以提交除图像之外的所有数据，请不要犹豫，查看github问题；）这里有人也有同样的问题。您需要将对象转换为FormData。那么我的控制器没有问题，先生？我觉得很难理解，但我会尽力理解。我不知道你的控制器是否正常。如果我是你，我会先检查我的表格是否正确编码。您可以使用开发人员工具检查这一点。打开它，使用“网络”选项卡，然后发送表单。您应该看到您的请求已发送。点击它，然后点击“标题”。然后向下滚动，您将看到您的请求数据。应将其命名为“FormData”。点击“查看来源”。您应该看到----WebKitFormBoundary等，它还会通知您所使用的内容类型。如果没有问题，你可以检查你的控制器。每当我在我的
图像
字段中放入一些文件时，它不会发生任何变化。但是，当我在表单的标题中输入一些文本时，表单数据中的
title
会立即更改。
Route::apiResource('news', 'API\NewsController');

 <div class="col-sm-12">
                  <input
                    type="file"
                    @change="updateImage"
                    class="form-input"
                    :class="{ 'is-invalid': form.errors.has('image') }"
                    id="image"
                    name="image"
                  />
                  <has-error :form="form" field="image"></has-error>
                </div>

<script>
    export default {
        data(){
            return{
                news: {},
                form: new Form({
                    id:"",
                    title: "",
                    subtitle:"",
                    body:"",
                    image:"",
                    postedby:""
                })
            }
        },

        methods: {
updateImage(e) {
      let file = e.target.files[0];
      console.log(file);
      let reader = new FileReader();
      if (file["size"] < 2111775) {
        reader.onloadend = file => {
          this.form.image= reader.result;
        };
        reader.readAsDataURL(file);
      } else {
        swal.fire({
          type: "error!",
          title: "Oops...",
          text: "Your are uploading a large File "
        });

        // return ["warning", "file size"];
        Fire.$emit("refreshPage");
      }
    },
            loadNews(){
                axios.get('api/news')
                    .then(({data}) => (this.news = data))
            },
            createNews(){
                this.$Progress.start()
                this.form.post("api/news")
                    .then(()=>{
                         $("#addNews").modal("hide")
                         $(".modal-backdrop").remove()
                        swal.fire("Created!", "", "success")
                    })
                this.$Progress.finish()
            },
        },

        created() {
            console.log('Component mounted.')
            this.loadNews()
        }
    }
</script>

<?php

namespace App\Http\Controllers\API;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\News;
class NewsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return News::latest()->paginate(10);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required|string|max:191|unique:news',
            'subtitle' => 'required|string|max:191',
            'body' => 'required|string',
            'image' => 'image|mimes:jpeg,png,jpg,gif,svg,PNG|max:2048',
        ]);


        $news = new News;
        $news->title = $request->title;
        $news->subtitle = $request->subtitle;
        $news->body = $request->body;
        if ($request->hasFile('image')){
$name = time().'.'.explode('/',explode(':',substr($request->image,0,strpos($request->image,';')))[1])[1];
                    \Image::make($request->image)->save(public_path('img/news/').$name);


            //Update DB
                $news->image = $name ;

        }

        $news->save();
    }
}