如何在Vue 2中处理文件上传

Posted 2023-05-10

参考技术A 在Vue中处理文件上传是一件容易的任务！
在本文中，我们将讨论如何使用VueJs处理文件上传。我们将创建一个图像上传器，允许用户通过拖放或选择文件对话框上传单个或多个图像文件。
然后，我们将上传所选图像并相应地显示它们。我们还将学习过滤上传文件类型，例如，我们只允许图像，不允许像PDF这样的文件类型。 参考技术B 按需组件引入吧，这样会减少不必要的css，当然你每个组件的css要独立出来，而且如果使用webpack 的vue-loader处理 即使重复引用同一个组件css也是同用一份，不会额外的复制多个本回答被提问者采纳

如何在 vue 组件上使用身份验证？ (Vue.JS 2)

【中文标题】如何在 vue 组件上使用身份验证？ (Vue.JS 2)

【英文标题】：How can I use auth on vue component ? (Vue.JS 2)

【发布时间】：2017-08-14 14:04:45

【问题描述】：

我的视图刀片是这样的：

@if (Auth::user())
    <favorite :id=" $store->id "></favorite>
@else
    <a href="url('/login?red='.Request::path())" class="btn btn-block btn-success">
        <span class="fa fa-heart"></span>Favorite
    </a>
@endif

Auth::user() 有效

但是，当我尝试这样的 vue 组件时：

<template>
    ...
    <div v-if="Auth::user()">
        <favorite :id="item.id"></favorite>
    </div>
    <a v-else href="javascript:" class="btn btn-block btn-success">
        <span class="fa fa-heart"></span>Favorite
    </a>
    ...
</template>

<script>
    export default 
        props: ...
        computed:
            ...
        ,
        ...
    
</script>

没有用

存在这样的错误：

无效表达式：v-if="Auth::user()"

如何在 vue 组件上使用身份验证？

【问题讨论】：

您是在构建 SPA 还是标准的多页应用程序？没有办法将纯 Laravel 的东西直接传入.vue 单文件组件

@Belmin Bedak，就像我不使用它一样

很高兴它有帮助！

@M U，太好了。非常感谢

【参考方案1】：

您不能以这种方式在 Vue 中使用 Laravel 变量 (PHP)。 您应该决定是要构建标准应用还是 SPA。 如果您想构建标准的多页应用程序，您可以将您的 VueJS 组件放置在 PHP 标记之间，就像您在第一个示例中所做的那样。 如果您仍想构建标准的多页应用程序，但能够使用您的 Auth::user() 值，则第 5 点有适合您的选项。 将Auth::user() 的值作为prop 传递给VueJS 组件。

https://vuejs.org/v2/guide/components.html#Props

像这样使用道具：

props: ['auth'],
(...)
<template>
    ...
    <div v-if="auth">
        <favorite :id="item.id"></favorite>
    </div>
    <a v-if="!auth" class="btn btn-block btn-success"> // avoid using v-else as per VueJS docs
        <span class="fa fa-heart"></span>Favorite
    </a>
    ...
</template>

并在代码中使用您的组件，例如： <favorite :id=" $store->id " auth="Auth::user()"></favorite>

不确定您是否不必将 Auth::user() 强制转换为 string/int，但我很确定您会用 php 解决。

【参考方案2】：

您可以使用auth()->user() 代替Auth::user()

【参考方案3】：

根据接受的答案，我无法让身份验证用户对象工作（无错误地呈现）:(

但我可以像这样访问和传递诸如 id 之类的直接属性

<example :auth="Auth::user()->id"></example >

请注意，它必须是“v-bind”，因为它是动态属性而不是显式字符串。

我还把它作为另一种产生用户 ID 的替代方案。

auth=" Auth::check() "

我很想知道如何将对象传递到 vue 组件中？