laravel vue_Vue Js fileuploader插件可以上传多个专门为laravel设计的文件

商弘义
2023-12-01

laravel vue

aammui文件上传器 (aammui fileuploader)

It's a vue js fileuploader plugin to handle multiple file upload specially made for laravel.

这是一个Vue js fileuploader插件,用于处理专门为laravel进行的多个文件上传。

安装 (Installation)

npm install[email protected] --save

用途 (Uses)

<template>
    <file-uploader url="http://localhost/medias" name="input_name" imgholder="id-to-hold-image-back"></file-uploader>
</template>
<script>
import { FileUploader } from "aammui-uploader";

export default {
    components: { FileUploader }
};
</script>

服务器文件清单 (Server file listing)

We assume that same url but (Get and Post) url is used to fetch and post images to server. For example: In above example the url http://localhost/medias return the data in following format

我们假设使用相同的url,但是使用(获取和发布)url来获取图像并将其发布到服务器。 例如:在上面的示例中,URL http:// localhost / medias返回以下格式的数据

{
    data: [
        {
            id: 188, // Media or Image Id that can be used to attach the media to other model.
            url: "http://localhost:8000/storage/upload/600-xQGysl5i1zsjwXt0I10UdODtdyziLIkT5FuDYElk.jpeg"
        }
    ]
}

本地文件列表 (local File listing)

Fileuploader will hit to same url by post methods and your backend should return the data in the following format.

Fileuploader将通过post方法访问相同的网址,并且您的后端应以以下格式返回数据。

{
    "id":189, // Media or Image Id that can be used to attach the media to other model.
    "url":"http:\/\/localhost:8000\/storage\/upload\/600-7Gz0FLKEbBA4ndStn97Na24xSg6kODkryp2Euvuw.jpeg"
}

将图像显示回占位符 (Displaying back image to placeholder)

Suppose you want use this uploader to upload profile picture and when user upload and set picture you may want to display back that picture to cetain placeholder. To do so you can pass imgholder props.

假设您要使用此上传器上传个人资料图片,并且当用户上传并设置图片时,您可能需要将该图片显示回某些占位符。 为此,您可以传递imgholder道具。

<file-uploader url="http://localhost/medias" name="input_name" imgholder="id-to-hold-image-back"></file-uploader>

翻译自: https://vuejsexamples.com/vue-js-fileuploader-plugin-to-upload-multiple-files-specially-made-for-laravel/

laravel vue

 类似资料: