vuejs 视频上传组件_Vuejs的简单上传多图像组件

vuejs 视频上传组件

VUE上传多张图片 (vue-upload-multiple-image)

A simple upload multiple image component for Vuejs.

Vuejs的一个简单的上传多个图像组件。

View demo 查看演示 Download Source 下载源

开发(NPM /纱线) (Development (NPM / Yarn))

npm run dev
yarn dev

安装 (Install)

NPM /纱线 (NPM / Yarn)

Install the package:

安装软件包：

npm install vue-upload-multiple-image
yarn add vue-upload-multiple-image

Then import it in your project

然后将其导入您的项目中

import VueUploadMultipleImage from 'vue-upload-multiple-image'

export default {
  components: {
    VueUploadMultipleImage,
  },
}

浏览器全局 (Browser global)

<script src="path/to/vue.js"></script>
<script src="path/to/dist/vue-upload-multiple-image.js"></script>

用法 (Usage)

You can simply view App.vue to see how to use vue-upload-multiple-image

您可以简单地查看App.vue以查看如何使用vue-upload-multiple-image

How to use:

如何使用：

<vue-upload-multiple-image
      @upload-success="uploadImageSuccess"
      @before-remove="beforeRemove"
      @edit-image="editImage"
      @data-change="dataChange"
      :data-images="images"
      ></vue-upload-multiple-image>

images has the structure:

images具有以下结构：

[
  {
    path: 'http://example.com/image.jpg',
    caption: 'caption to display. receive', // Optional
  }
]

例 (Example)

<template>
  <div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
    <vue-upload-multiple-image
      @upload-success="uploadImageSuccess"
      @before-remove="beforeRemove"
      @edit-image="editImage"
      @data-change="dataChange"
      :data-images="images"
      ></vue-upload-multiple-image>
  </div>
</template>

<script>
import VueUploadMultipleImage from 'vue-upload-multiple-image'
import axios from 'axios'
export default {
  name: 'app',
  data () {
    return {
      images: []
    }
  },
  components: {
    VueUploadMultipleImage
  },
  methods: {
    uploadImageSuccess(formData, index, fileList) {
      console.log('data', formData, index, fileList)
      // Upload image api
      // axios.post('http://your-url-upload', { data: formData }).then(response => {
      //   console.log(response)
      // })
    },
    beforeRemove (index, done, fileList) {
      console.log('index', index, fileList)
      var r = confirm("remove image")
      if (r == true) {
        done()
      } else {
      }
    },
    editImage (formData, index, fileList) {
      console.log('edit data', formData, index, fileList)
    },
    dataChange (data) {
      console.log(data)
    }
  }
}
</script>

<style>
#my-strictly-unique-vue-upload-multiple-image {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

选件 (Options)

道具 (Props)

name	type	default	description
dragText	String	Kéo hình ảnh(nhiều)	Drag Text
browseText	String	(hoặc) Chọn	Browse Text
primaryText	String	Mặc định	Primary Text
markIsPrimaryText	String	Đặt làm mặc định	Set default image
popupText	String	Hình ảnh này sẽ được hiển thị làm mặc định	Description default image
dropText	String	Thả tệp của bạn ở đây ...	Drag and drop
accept	String	image/gif,image/jpeg,image/png,image/bmp,image/jpg	Accept
dataImages	Array	[]	Array images
multiple	Boolean	true	Set upload multiple image
showPrimary	Boolean	true	Show text default image
maxImage	Number	5	Maximum upload image

名称	类型	默认	描述
dragText	串	Kéohìnhảnh(nhiều)	拖曳文字
BrowseText	串	(hoặc)Chọn	浏览文字
primaryText	串	Mặcđịnh	主要文字
markIsPrimaryText	串	ltlàmmặcđịnh	设置默认图片
popupText	串	Hìnhảnhnàysẽểchiểnthịlàmmặcđịnh	说明默认图片
dropText	串	ảtủpcủabạnởây...	拖放
接受	串	图片/ gif，图片/ jpeg，图片/ png，图片/ bmp，图片/ jpg	接受
dataImages	数组	[]	阵列图像
多	布尔型	真正	设置上传多张图片
showPrimary	布尔型	真正	显示文字默认图片
maxImage	数	5	最大上传图片

大事记 (Events)

name	arguments	description
upload-success	(formData, index, fileList)	Upload image succcess
edit-image	(formData, index, fileList)	Edit image succcess
before-remove	(index, done, fileList)	Before delete image
mark-is-primary	(index, fileList)	Set default image

名称	论点	描述
上传成功	(formData，索引，fileList)	上传图片成功
编辑图像	(formData，索引，fileList)	编辑图像成功
移除前	(索引，完成，fileList)	删除图像之前
标记为主要	(索引，文件列表)	设置默认图片

翻译自: https://vuejsexamples.com/a-simple-upload-multiple-image-component-for-vuejs/

vuejs 视频上传组件