账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue v-for 循环 图片上传(vue-upload-component)
    25
    0

    正常代码 (https://lian-yue.github.io/vu...

        <div class="uploadFile-container">
          <file-upload ref="upload" v-model="uploadFiles" accept="image/*" :multiple="true" post-action="http://....." :maximum="5" @input-file="inputFile" @input-filter="inputFilter">
            <div class="uploadFile">
              <i class="camera"></i>
              <span>添加图片</span>
            </div>
          </file-upload>
          <div class="file-data" v-for="(file,fileIndex) in uploadFiles" :key="fileIndex">
            <img :src="file" alt="" :key="fileIndex">
          </div>
        </div>
    
    

    methods: {

    inputFile: function (newFile, oldFile) {
      if (newFile && oldFile && !newFile.active && oldFile.active) {
        // 获得相应数据
        console.log('response', newFile.response)
        if (newFile.xhr) {
          //  获得响应状态码
          console.log('status', newFile.xhr.status)
        }
      }
    },
    
    inputFilter: function (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 过滤不是图片后缀的文件
        if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
          return prevent()
        }
      }
    
      // 创建 blob 字段 用于图片预览
      newFile.blob = ''
      let URL = window.URL || window.webkitURL
      if (URL && URL.createObjectURL) {
        newFile.blob = URL.createObjectURL(newFile.file)
      }
    }

    }

    需求 加个v-for后,多个上传失败

        <div class="uploadFile-container" v-for="(item,index)" :key="index">
          <file-upload ref="upload" v-model="item.uploadFiles" accept="image/*" :multiple="true" post-action="http://....." :maximum="5" @input-file="inputFile" @input-filter="inputFilter">
            <div class="uploadFile">
              <i class="camera"></i>
              <span>添加图片{{item.name}}</span>
            </div>
          </file-upload>
          <div class="file-data" v-for="(file,fileIndex) in item.uploadFiles" :key="fileIndex">
            <img :src="file" alt="" :key="fileIndex">
          </div>
        </div>
    
    
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部