waynecz / vue-img-inputer Goto Github PK

你好，请问在 vue-img-inputer这个项目里，你引用这个组件的父组件是哪个，在哪里放，因为 git 代码里有几处父子组件交互的地方我看不太懂，所以想找到你的父组件

我克隆之后，npm install ，之后 npm start ，出现cannot get

when i use vue-img-inputer with another component. there is a crash between hover the first element and the second. this happen because mouse pointer in both of hover area.

note : i use vuetify datepicker. when i select click the date and dialog datepicker appear, the bug happened

请问当次表单提交完成后，如何把预览图清空

如题所示，可能是什么原因？

我在handleFileChange这个方法加了一个upLoad方法，如下：

        handleFileChange (e) {
          this.upLoad(this.file)
          console.log(this)  //这里的this在控制台里看到的fileUp是有值的
          console.log(this.fileUp) //第一次这里打印出来的fileUp是空字符串
          // 双向绑定
          this.$emit('input', this.file);
          // 文件选择回调 && 两种绑定方式
          this.onChange && this.onChange(this.file, this.file.name,this.fileUp);
         
          this.$emit('onChange', this.file, this.file.name,this.fileUp);
         
          this.imgPreview(this.file);
 
          this.fileName = this.file.name;
 
          this.isActive = false

          this.resetInput();
        })

请问你知道什么原因吗？

我给组件设置样式为宽高各60，我看源码给的错误提示是width是100%，但是提示文字超过了60px，被组件遮挡住了一部分，麻烦看一下

而且我想重置内部的样式只能通过改源码，而没办法自定义

请问上传一个照片之后，可以出现一个新的选择图片的地方，支持上传多涨图片吗

无法安装，貌似node现在版本装不了？？？

现在手机拍的照片都很大一张，估计4-5M，上传很慢，影响客户体验，能不能压缩一下图片后提交

修改成竖向图片

大神你好，正如我在另一个问题提到的一样，我想实现如图所示的效果

即图片大小是60*60，图片下方是使用你的组件实现的，但是我发现只能通过 size设置small 、normal和large，能否自定义大小呢？谢谢

请问插件的初始图片怎么设置，是不是用imgSrc设置，为什么我设置了显示不出来

变成了这样子

我图片地址是没问题的

如果一开始 model 有值得话，组件并不能显示图片

兄弟你好，我现在要做多张图片上传功能，比如身份证或者是行驶证，或者是些其他的证件，我需要将这些不同的type传给后端，我建议在props里面可以支持从外界传入一个type，并且在onchange事件里面可以让我取到这个type

请问这个组件可以多图上传吗？怎么没有多图上传的demo呢？

我选择一个图片上传 拍照完经常会自动刷新一下页面 是什么情况

怎么清空回填后图片的路径？

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.

求教一下是什么原因，谢谢！

你好，被选中的图片 以什么的数据格式上传的服务端

如题，当传入的参数 :imgSrc="item.list_image" 时，item.list_image是ajax返回的数据，页面只渲染了组件，组件内的图片，并没有渲染，请问这个问题怎么解决比较好呢？

我尝试了一下加一个v-if的判断：
<imgInputer v-if="item.list_image" v-model="file" accept="image/*" :imgSrc="item.list_image" @onchange="fileChange">
这样是可行的，这样整个组件会等待ajax返回后再渲染，请问还有更优雅一点的方式吗？

<template></template>

在最后一行,没见过这种写法....很奇怪

`<div class="nick f-pr">
          <span>昵称：</span><input type="text" placeholder="请输入用户昵称" v-model="nick_name"/>
          <div class="avatar f-pa" :style="{background: 'url(' + userInfo.avatar + ')'}">
            <VueImgInputer v-model="picValue" theme="light" size="small" placeholder="" accept="image/*" icon="false">
            </VueImgInputer>
          </div>
        </div>`

userInfo.avatar这张图是后台返回的，我想作为预览图

请问这几个demo的源码有嘛

这是什么原因呢？我的是windows系统，跟系统有关系吗？

大神好，我看了组件原码，在组件生成的html代码中，已经把input(type=file)的标签放到-9999了，响应点击打开文件选择窗口的行为是怎么实现的？

大神你好，

我在用 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)
这个提示应该属于跨域问题吧，这个问题怎么解决呢

您好，请问此插件可以完成以上功能吗？感谢

#关键代码：

<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,数据正常删除，但是页面上没有实时渲染

如题，请问移动端打开默认都是摄像头，要上传手机图片在拿个参数可以设置。

组件装好了，组件上有个v-model属性，我该怎么连同表单一起上传文件呢？

html部分

  <div class="photoarea-outer">
        <form action="" enctype="multipart/form-data" method="post">
        <div class="photoarea f-cb">
          <VueImgInputer v-model="picValue1" theme="light" size="small" placeholder="" accept="image/*" icon="true" class="image-insert f-fl" noMask :capture="false">
          </VueImgInputer>
          <VueImgInputer v-model="picValue2" theme="light" size="small" placeholder="" accept="image/*" icon="true" class="image-insert f-fl" noMask :capture="false">
          </VueImgInputer>
          <VueImgInputer v-model="picValue3" theme="light" size="small" placeholder="" accept="image/*" icon="true" class="image-insert f-fl" noMask :capture="false">
          </VueImgInputer>
        </div>
        </form>
      </div>

js部分，提交信息给后台

var picTimer = setInterval(() => {
            if (pic1Finish && pic2Finish && pic3Finish) {
              let postData = new FormData();
              postData.append('file1', self.picValue1);// 绑定的图片值
              postData.append('file2', self.picValue2);// 绑定的图片值
              postData.append('file3', self.picValue3);// 绑定的图片值
              postData.append('token', global.searchLocalStorage('XTSY_token')); 
              postData.append('comment', self.desc);
              postData.append('orderId', self.$route.query.orderId);
              postData.append('goodsId', self.$route.query.goodsId);
              postData.append('goodsStocksId', self.$route.query.goodsStocksId);
              postData.append('status', self.starNum);
              postData.append('flag', self.flag);
              global.requestData('post', '/xituApi/api/GoodsCommentAPI/save', postData, (res) => {
                res = res.data;
                if (res && res.code === 1) {
                  swal({
                    title: '评价成功！',
                    showConfirmButton: false,
                    timer: 500
                  });
                  setTimeout(() => {
                    self.loadingVisible = false;
                    self.$router.go(-1);
                  }, 1000);
                } else if (res && res.code === 422) {
                  global.jumpToLogin();
                } else {
                  swal({
                    title: res.msg
                  });
                }
              }, () => {
                swal({
                  title: '通信失败！'
                });
              });
              clearInterval(picTimer);
            }
          }, 100);

用拍照的方式上传三张图片出错，在相册里面选择照片上传是正常的。

设置accept="image/*" ，移动端无法同时打开拍照、相册，永远默认直接打开摄像头，capture 属性设置无效。想打开相册不行。iOS 安卓都不行

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

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

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

现在这样 并不行

请问一下，您这个轮子，怎么把图片存到本地 并返回图片路径呢

我目前的情况是，在某个页面中使用了三次vue-img-inputer组件，因为功能需求是一次性上传三张图片。三个组件用form表单包裹，然后出现了一个奇怪的问题。1、若使用一次组件，那么使用正常。2、使用三次组件，通过相册上传图片正常。3、使用三次组件，通过摄像头拍张上传失败。此时调用Vue.http是直接进入报错函数了，无法向服务器发起请求。我目前的手机系统是ios10.2。
求大神指教......

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
··

在 demo 上测试：

• 使用点击上传

document.getElementById('wddvm').value
"C:\fakepath\lifecycle.png"

• 拖拽上传

document.getElementById('8h5cb').value
"" // 返回空

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

我使用这个组件上传，如下

data() { return { corpInfo:{ logo:'', }, uploadFileData:null,

但是获取到的文件数据（uploadFileData）是空啊{}

如题，当传入的参数 :imgSrc="item.list_image" 时，页面只渲染了组件，组件内的图片，并没有渲染，请问这个问题怎么解决比较好呢？

我尝试了一下加一个v-if的判断：

您好，我根据后台返回的图片数量来生成VueImgInputer组件，比如后台返回的数据
images{ 1 : "/images/2017/11/06/1509948936565.png" 2 : "/images/2017/11/06/1509948936610.PNG" 3 : "/images/2017/11/06/1509948936651.PNG" 4 : "/images/2017/11/06/1509948936728.PNG"来渲染

<div class="pic" v-for="(img,key) in imagesData"> <VueImgInputer theme="light" size="small" placeholder="" accept="image/*" icon="true" noMask :capture="false" :imgSrc="img"> </VueImgInputer> </div>
，在页面上生成了4个VueImgInputer组件，每个都可以修改，预览。请问v-model怎么动态的绑定到组件中去呢？

<VueImgInputer v-model="picValue" theme="light" size="small" placeholder="" accept="image/*" icon="false" noMask :capture="false" :onChange=upLoadImg :imgSrc="this.avatar" > </VueImgInputer>

点击头像框，选择相册或者相机，回填后上传给后台。但是通过相机拍照不触发upLoadImg，在相册中选择图片却可以触发。
upLoadImg(file){ eventBus.$emit('showLoading'); this.picValue = file; console.log(this.picValue); let self = this; if (this.picValue.size) { global.compress(self.picValue, 0.1, function (err, data) { self.picValue = data; }); let postData = new FormData(); postData.append('action','update'); postData.append('nickname', self.userInfo.nickname); postData.append('avatar',self.picValue); global.requestData('post',url, (res)=>{ res = res.data; if(res && res.code === global.successNum){ console.log('上传成功') } }) } }

为什么刚开始使用还可以，过了一两天以后单击等选择图片弹出要隔四五秒，有时候达到七八秒？

this.$refs.XXX.reset()
这个用不了

我目前是 直接 进入文件加 执行 npm start 报错