like, only support single image auto-upload support drop-select / preview / use as like, only support single image auto-upload support drop-select / preview / use as like, only support single image auto-upload support drop-select / preview / use as

🏞 A graceful image type inputer / uploader

Overview

vip


GitHub release poi Bili


点击查看中文文档 | Have a glance at Demo


Intro

  • <input type="file" /> like, only support single image
  • auto-upload support
  • drop-select / preview / use as <img /> as well
  • optional skins

Screenshots


Install and Usage

npm install vue-img-inputer
import ImgInputer from 'vue-img-inputer'
import 'vue-img-inputer/dist/index.css'

Vue.component('ImgInputer', ImgInputer)
<img-inputer v-model="file" theme="light" size="large"/>

API

Auto upload related
  1. auto-upload: Boolean
    set to enable auto-upload

  2. action: String
    request URL

  3. upload-key: String
    default: file
    key name in form-data

  4. extra-data: Object
    extra data been appended in request's form-data

  5. headers: Object
    additional headers of request

  6. with-cookie: Boolean
    whether cookies will been sent

  7. on-start: Function
    params: func ( file )
    hook function when upload start

  8. on-progress: Function
    params: func ( event, file )
    hook function when uploading, get progress by event.percent

  9. on-success: Function
    params: func ( res, file )
    hook function when upload success, res is response from server

  10. on-error: Function
    params: func ( err, file )
    hook function when upload failed


Input tag related
  1. accept: String
    default: image/*,video/*;
    suggest to set a specific value like image/jpg,image/gif; for wildcard will lead to a serious delay

  2. placeholder: String
    default: Drop file here or click

  3. id: String
    default: random string in 4 length
    id of input tag

  4. readonly: Boolean

  5. capture: Boolean
    default: false
    whether use camera directly in mobile

  6. max-size: Number
    default: 5120
    max-size of image (KB)

  7. name: Boolean
    name of input tag

  8. any input's attribute
    any input's original attributes set on component will be inherited by inner input tag


UI related
  1. img-src: String
    image resource let component behavior like <img />

  2. theme: String
    default: material two themes optional (light / material)

  3. size: String small / normal / large

  4. icon: String
    clip / img / img2

  5. ali-icon: String
    if you use iconfont.cn, set unicode of any icon to custom

  6. no-mask: Boolean
    remove mask when hover

  7. no-hover-effect: Boolean
    remove all hover effect (include text) when hover

  8. bottom-text: String
    default: Drop file here or click to change
    text in the bottom when hover

  9. no-multiple-text: String
    default: Not support multiple files
    visible only the state is readonly, cover bottom-text

  10. exceed-size-text: String
    default: The size of file should less than: ${maxSize}
    visible only the state is readonly, cover bottom-text

  11. no-action-text: String
    default: Action hasn't set up yet
    visible only the state is readonly, cover bottom-text

  12. readonly-tip-text: String
    default: Readonly
    visible only the state is readonly, cover bottom-text


Events
  1. onChange: Function
    params: func ( file, fileName )
    hook function when file selected

  2. onExceed: Function
    params: func ( file )
    hook function when file exceed max-size


Methods
  1. reset
    reset componet but will not clear img-src

Comments
  • 请教一下启动报错!

    请教一下启动报错!

    npm install 后 npm run start 报错 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: node build/dev-server.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    求教一下是什么原因,谢谢!

    opened by ronnieyuyiwei 9
  • 如何主动触发点击事件?

    如何主动触发点击事件?

    有一个页面,希望在快捷入口进入时,不需要用户点击上传按钮就打开上传框。

    意思就是这个页面加载的时候,就主动触发一次组件的click事件,要如何做?

      mounted() {
        if (this.$route.params.pickImage) {
          this.$refs.$image.$el.click();
        }
      },
    

    现在这样 并不行

    opened by tinymins 7
  • Replace maxSize translate

    Replace maxSize translate

    Hey, the text of the size is not translated:

    handleFileChange: function handleFileChange(e) {
            if (typeof e.target === "undefined") this.file = e[0];else this.file = e.target.files[0];
            this.errText = "";
            var size = Math.floor(this.file.size / 1024);
    
            if (size > this.maxSize) {
              this.errText = "\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(this.sizeHumanRead);
              return false;
            } // 双向绑定
    }
    
    opened by magarrent 5
  • 朋友你好,动态添加imgInputer , 删除后渲染有问题

    朋友你好,动态添加imgInputer , 删除后渲染有问题

    #关键代码:

    <div v-for="(item,index) in fileList">
          <imgInputer v-model="item.file" accept="image/*" @onChange="fileChange"/>
          <button type="button" @click="remove(fileList,index)">remove</button>
    </div>
    <button type="button" @click="add">add</button>
    
    
       methods: {
          fileChange(file, name) {
            console.log('File:', file);
            console.log('FileName:', name);
         },
          add(){
            this.fileList.push({
              file:null
            })
          },
          remove(item,index){
            item.splice(index,1)
          }
        }
    

    描述: 当我执行add()方法后,fileList = [{file:null},{file:null}],添加图片以后fileList = [{file:file1},{file:file2}],如果执行remove()删除file1,数据正常删除,但是页面上没有实时渲染

    opened by yukiflandre 4
  • Use vue-cli3 typescript issues

    Use vue-cli3 typescript issues

    when i use typescript in vue-cli3.0, i try import 'vue-img-inputer/dist/index.css' npm show ./node_modules/vue-img-inputer/dist/fonts/iconfont.svg?t=1487650731256 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. how to fix this issues i try to modify my vue.config.js, add svg's url-loader and file-loader, but it still doesn't work.

    opened by Terry-bear 3
  • 拖拽上传无法获取文件名

    拖拽上传无法获取文件名

    demo 上测试:

    • 使用点击上传
    document.getElementById('wddvm').value
    "C:\fakepath\lifecycle.png"
    
    • 拖拽上传
    document.getElementById('8h5cb').value
    "" // 返回空
    

    另外建议把 demo 的源码也传到 GitHub,便于他人 pr 时调试。

    opened by sinchang 3
  • chrome点击上传打开弹窗大概要10s

    chrome点击上传打开弹窗大概要10s

    chrome点击上传打开弹窗大概要10s, 在iview里面使用并且报错 ·· Property or method "back" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components ·· ·· [Vue warn]: Invalid handler for event "click": got undefined ··

    opened by longting 2
  • Add license scan report and status

    Add license scan report and status

    Your FOSSA integration was successful! Attached in this PR is a badge and license report to track scan status in your README.

    Below are docs for integrating FOSSA license checks into your CI:

    opened by fossabot 1
  • 上传参数配置问题

    上传参数配置问题

    大神你好,

    我在用 auto-upload 做图片上传的时候是这样写的

            <el-table-column
              prop="coverurl"
              label="书籍封面"
              sortable
              width="180" header-align="center">
    
              <template slot-scope="scope">
                <!--  <img  :src="scope.row.coverurl" alt="" style="width: 70px;height: 70px">
                 -->
                <img-inputer 
                    action ="http://localhost:8081/article/uploadimg"  
                    headers="{ 'Content-Type': 'multipart/form-data'}" 
                    v-model="file" theme="light" size="small" 
                    auto-upload 
                    :imgSrc="scope.row.coverurl" 
                    accept="image/jpeg,image/png"/>
              </template>
            </el-table-column>
    

    然后运行就会提示 XMLHttpRequest cannot load http://localhost:8081/article/uploadimg. Response for preflight is invalid (redirect) 这个提示应该属于跨域问题吧,这个问题怎么解决呢

    opened by Mcdull-wei 19
Releases(2.1.3)
  • 2.1.3(Mar 5, 2019)

    新增

    • onExceed Hook,trigger when the file-size exceed maxSize setting / onExceed 钩子函数,当文件超出最大设置大小时调用,示例:
    <template>
        <inputer :maxSize="100" @onExceed="exceedHandler" />
    </template>
    
    <script>
      // ...
        exceedHandler(file) {
           console.warn('File is too large!')
        }
     // ...
    </script>
    
    
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Jun 13, 2018)

    新增

    • 添加自动上传功能

    改变

    • 文档翻新
    • 项目结构大整
    • customer-icon --> ali-icon

    修复

    • 修复移动端下非微信环境只能调用相机的问题
    Source code(tar.gz)
    Source code(zip)
An image input preview component in vuejs2

Vue-img-preview This is a minimal image preview implementation that does only one thing; give users feedback by showing image chosen from a file input

Dammy 18 Nov 24, 2022
Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).

Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).

ali jahanpak 63 Nov 24, 2022
vue-props-type - Helps to define the props type.

Vue Props Type (Translated by DeepL The Vue Props Type helps to define the props type in Vue.js. Why If you want to use composition-api, you need to w

null 20 Jun 22, 2022
Alex Vipond 3 Jan 31, 2022
A cloudinary image cropper and uploader component for VueJs

vue-cloudinary-uploader A cloudinary image cropper and uploader component for VueJs Props Option Type Required Default cloudinaryCloudName String true

James Sinkala 4 Oct 3, 2022
complete and simple file uploader with image compressor

vue-file-uploader Complete and simple file uploader with image compressor in Vue.js Choice Theme : Thumbnail, Simple, Table Add custom fields (Title,

ali jahanpak 15 Oct 14, 2022
Configurable image uploader with preview

vue-upload-image Configurable image uploader with preview drag and drop with input backup image previews simple resizing events minimal configurable I

Viral-Vector 34 Apr 20, 2022
an ad admin web, with vue, bootstrap, user auth, uploader and WYSIWYG editor in iframe.

vuetest this project is for mandarin(中文) only VUE TEST BY Sjerrys file uploader, user auth, text editor, bootstrap stuff. can be use with any kind of

3000 20 Nov 24, 2022
Simple and hackable file uploader for VueJs. Supports Vue = 2.1

Introduction Vue clip is a minimalistic and hackable file uploader for VueJs. I wrote this plugin due to the absence of well written file uploaders wi

Harminder Virk 222 Dec 10, 2022
Drag and drop multiple file uploader with Vue.js v2 and Axios

vue2-multi-uploader A drag and drop multiple file uploader component that uses Vue.js v2 and Axios. Uploader shows file names, sizes and total size of

UPDIVISION 47 Sep 29, 2022
Vue.js drag & drop uploader based on Dropzone.js

Vue-Transmit STATUS: Unmaintained I am currently unable to give this project much attention. I won't be addressing issues or creating new versions for

Alex Regan 212 Aug 4, 2021
A Vue.js upload component powered by simple-uploader.js

vue-simple-uploader A Vue.js upload component powered by simple-uploader.js 中文 Features Treat Folder and File as File Pause/Resume upload Recover uplo

null 1.7k Jan 4, 2023
This component is a multi-file uploader for firebase

ic-firebase-uploader This component is a multi-file uploader for firebase Installation Using yarn yarn add ic-firebase-uploader Using npm npm i --save

InCuca Tech 20 Nov 24, 2022
Vue multipart file uploader

Vuejs Uploader Multipart uploader Vue component. This uploader will optionally upload files in multipart chunks. This get's around max upload sizes al

Charlie Kassel 61 Nov 24, 2022
A mobile vue component implementation for weui uploader

vux-uploader-component a mobile vue component implementation for weui uploader Install npm install -S vux-uploader-component Mobile demo https://ejayy

eJay 99 Nov 19, 2022
Imgur drag-n-drop uploader website built with vue.js

Uploadr Quickly upload images to various services! Easily paste, drag, or select

Coding 7 Dec 22, 2022
A reactjs and vuejs component of file uploader

file-uploader-component features reactjs component vuejs component drag file(s) and drop to the component click to choose file(s) paste file from clip

York Yao 12 Jan 18, 2022
Makes using Fine Uploader in a VueJS 2 app simple

Makes using Fine Uploader in a VueJS 2 app simple. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI.

Dieter Sting 104 Oct 22, 2022
jj-uploader is designed for single file update usage in your Vue App.

jj-uploader is designed for single file update usage in your Vue App. Usage install jj-uploader via npm npm i jj-uploader import it into your view

null 0 Dec 23, 2018
A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast

v-dialogs · A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast Examples and Documentation Exp

Terry Zeng 126 Sep 25, 2022