编程

Vue 3 媒体上传组件

1644 2022-01-08 18:16:44

media-upload 包是一个Vue3组件,用于上传多图和预览。

Media Upload 支持创建、更新图片以及处理上传。此包有两个组件,一个用于上传新图片,另一个用于更新图片:

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

组件以multipart/form-data 格式上传图片,服务器返回唯一的临时图片名。表单以hidden 方式提交媒体数据,然后将其复制到最终位置。

更多信息查看源码https://github.com/s1modev/media-upload

 

包作者同时写了一篇 <如何在Laravel/Vue中使用该组件(how to upload multiple images with preview using Laravel and Vue)> 的教程。