vue-mobile-img-upload v1.0.3

vue-mobile-img-upload

移动端 Vue.js 上传预览图片组件

a Vue.js mobile image uplaod component

该组件使用了 axios 工具上传文件，如果需要使用该组件请先：

This component uses the axios tool to upload files. If you need to use this component, please first:

npm install axios

npm install

npm install vue-mobile-img-upload

yarn

yarn add vue-mobile-img-upload

在使用该组件时只需要在父组件配置 config 并使用 v-bind 指令绑定

When using this component, you only need to configure the config in the parent component and bind it with the v-bind directive.

// main.js
import Upload from 'vue-img-upload'
import Vue from 'vue'

Vue.use(Upload)

// App.vue
<template>
  <div id="app">
    <Upload :config="config" @onError="onError" @uploadFinally="uploadFinally" ref="upload"></Upload>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'app',
  data () {
    return {
      config: {
        // options
      }
    }
  },
  methods: {
    onError(err) {
      console.log(err)
    },
    upload() {
      // 可自定义
      // 'key' 为要传输的文件 key ，
      // 在内部是 FromData().append('key'/* 对应的 key */, /* 文件对象 */)
      // 该 'key' 参数不传默认为 'file'
      // 利用 $refs 调用子组件内的 Function
      this.$refs.upload.upload(this.paramsOptions, 'key')
    },
    paramsOptions() {
      // 这里可以设置其他参数
      let params = new FormData()
      let _this = this
      // 请求配置
      let config = {
        timeout: 1000,
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      return {
        params,
        config
      }
    },
    uploadFinally(args, files) {
      console.log(args, files)
      // 这里可以从 args 集合中知道哪些图片未上传成功，
      // 如果需要重新上传，可以将 files 数组中上传成功的文件删除
      // files.splice(index, 1)
      // 重新调用上传方法
      // this.$refs.upload.upload(this.paramsOptions, 'file')
    }
  }
}
</script>
<style>
  // custom style <scss>
  .upload-row{
    margin: 0 15px;
    .uploader {
      width: calc(100% + 10px);
      list-style: none;
      li {
        float: left;
        padding: 5px;
        margin-bottom: 10px;
        width: 6.5rem;
        height: 6.5rem;
        margin: 10px 10px 10px 0;
        border: 1px solid #dcdcdc;
        &:first-child {
          border-color: #fe7457;
        }
      }
    }
  }
</style>

config options

methods config

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.