使用iView Upload 组件实现手动上传图片的示例代码


Posted in Javascript onOctober 01, 2018

在过去,浏览器是不允许我们读取本地的文件,包括图片。因此,当我们需要预览一个图片的时候,往往先将它传送到服务端,然后服务端返回一个访问 url 地址,达到预览图片的功能。如今,随着标准不断的改善,JavaScript 里的 API 越来越多,我们可以通过直接读取本地文件的方式来加载我们想要看到的文本或者图片,一定程度上减少了服务端的压力。

Upload 组件参考文档:https://www.iviewui.com/components/upload

文档提供的参考代码:

<template>
  <div class="demo-upload-list" v-for="item in uploadList">
    <template v-if="item.status === 'finished'">
      ![](item.url)
      <div class="demo-upload-list-cover">
        <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
        <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
      </div>
    </template>
    <template v-else>
      <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
    </template>
  </div>
  <Upload
    ref="upload"
    :show-upload-list="false"
    :default-file-list="defaultList"
    :on-success="handleSuccess"
    :format="['jpg','jpeg','png']"
    :max-size="2048"
    :on-format-error="handleFormatError"
    :on-exceeded-size="handleMaxSize"
    :before-upload="handleBeforeUpload"
    multiple
    type="drag"
    action="//jsonplaceholder.typicode.com/posts/"
    style="display: inline-block;width:58px;">
    <div style="width: 58px;height:58px;line-height: 58px;">
      <Icon type="camera" size="20"></Icon>
    </div>
  </Upload>
  <Modal title="查看图片" v-model="visible">
    ![]('https://o5wwk8baw.qnssl.com/' + imgName + '/large')
  </Modal>
</template>
<script>
  export default {
    data () {
      return {
        defaultList: [
          {
            'name': 'a42bdcc1178e62b4694c830f028db5c0',
            'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
          },
          {
            'name': 'bc7521e033abdd1e92222d733590f104',
            'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
          }
        ],
        imgName: '',
        visible: false,
        uploadList: []
      }
    },
    methods: {
      handleView (name) {
        this.imgName = name;
        this.visible = true;
      },
      handleRemove (file) {
        // 从 upload 实例删除数据
        const fileList = this.$refs.upload.fileList;
        this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      },
      handleSuccess (res, file) {
        // 因为上传过程为实例,这里模拟添加 url
        file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
        file.name = '7eb99afb9d5f317c912f08b5212fd69a';
      },
      handleFormatError (file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确,请上传 jpg 或 png 格式的图片。'
        });
      },
      handleMaxSize (file) {
        this.$Notice.warning({
          title: '超出文件大小限制',
          desc: '文件 ' + file.name + ' 太大,不能超过 2M。'
        });
      },
      handleBeforeUpload () {
        const check = this.uploadList.length < 5;
        if (!check) {
          this.$Notice.warning({
            title: '最多只能上传 5 张图片。'
          });
        }
        return check;
      }
    },
    mounted () {
      this.uploadList = this.$refs.upload.fileList;
    }
  }
</script>
<style>
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
    display: block;
  }
  .demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
</style>

自己实现手动上传:

<template>
  <div>
    <div class="demo-upload-list" v-for="item in uploadList">
      ![](item.url)
      <div class="demo-upload-list-cover">
        <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
      </div>
    </div>
    <Upload ref="upload" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :before-upload="handleBeforeUpload" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" type="drag" action="//jsonplaceholder.typicode.com/posts/" style="display: inline-block;width:58px;">
      <div style="width: 58px;height:58px;line-height: 58px;">
        <Icon type="camera" size="20"></Icon>
      </div>
    </Upload>
  </div>
</template>
<script>
export default {
 methods: {
  data(){
    return {
      uploadList: []
    }
  },
  handleBeforeUpload(file) {
    // 创建一个 FileReader 对象
    let reader = new FileReader()
    // readAsDataURL 方法用于读取指定 Blob 或 File 的内容
    // 当读操作完成,readyState 变为 DONE,loadend 被触发,此时 result 属性包含数据:URL(以 base64 编码的字符串表示文件的数据)
    // 读取文件作为 URL 可访问地址
    reader.readAsDataURL(file)

    const _this = this
    reader.onloadend = function (e) {
      file.url = reader.result
      _this.uploadList.push(file)
    }
  },
  handleRemove(file) {
    this.uploadList.splice(this.uploadList.indexOf(file), 1)
  },
  handleFormatError(file) {
   this.$Notice.warning({
    title: '文件格式不正确',
    desc: '文件 ' + file.name + ' 格式不正确,请上传 jpg 或 png 格式的图片。'
   })
  },
  handleMaxSize(file) {
   this.$Notice.warning({
    title: '超出文件大小限制',
    desc: '文件 ' + file.name + ' 太大,不能超过 2M。'
   })
  }
 }
}
</script>
<style scoped>
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.ivu-icon {
  line-height: 58px;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
List Information About the Binary Files Used by an Application
Jun 11 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
js实现简单进度条效果
Mar 25 Javascript
vue项目持久化存储数据的实现代码
Oct 01 #Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 #Javascript
在create-react-app中使用sass的方法示例
Oct 01 #Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 #Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 #Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 #Javascript
angularJs中$scope数据序列化的实例
Sep 30 #Javascript
You might like
PHP 金额数字转换成英文
2010/05/06 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
浅析js封装和作用域
2013/07/09 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
python3简单实现微信爬虫
2015/04/09 Python
Python实现telnet服务器的方法
2015/07/10 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
总经理助理职责
2014/02/04 职场文书
企业授权委托书范本
2014/09/22 职场文书
慰问信格式规范
2015/03/23 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android