vue带预览的多张图像上传 - media-upload

vue带预览的多张图像上传 - media-upload
插件名称 media-upload
发布时间 2022年1月5日
插件作者 s1modev

一个媒体上传组件,允许通过实时预览上传多张图片。

安装和下载:

# Yarn
$ yarn add @s1modev/media-upload

# NPM
$ npm i @s1modev/media-upload

使用:

1. 导入媒体上传组件。

import {UploadMedia, UpdateMedia} from "@s1modev/media-upload";
export default {
  components: {
    UploadMedia,
    UpdateMedia
  }
};
// OR
import { createApp } from 'vue';
import { UploadMedia, UpdateMedia } from '@s1modev/media-upload';
let app=createApp({})
app.component('upload-media' , UploadMedia);
app.component('update-media' , UpdateMedia);
app.mount("#app")

2. 创建图片上传器:

// 创建表单
<div id="app">
  <upload-media 
    server="/api/upload"
    error="@error('media'){{$message}}@enderror">
  </upload-media>
</div>
// 更新表单
<div id="app">
  <update-media 
    server="/api/upload"
    media_file_path="/post_images"
    media_server="/api/media/{{$post->id}}" 
    error="@error('media'){{$message}}@enderror">
  </update-media>
</div>