使用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,超强推荐share.js
Dec 23 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
实例详解Node.js 函数
Jun 10 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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 array 的加法操作代码
2010/07/24 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
获取URL文件名后缀
2013/10/24 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
浅析Python中的序列化存储的方法
2015/04/28 Python
python批量提取word内信息
2015/08/09 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python将string转换到float的实例方法
2019/07/29 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
python3跳出一个循环的实例操作
2020/08/18 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
初中生物教学反思
2014/01/10 职场文书
医疗纠纷协议书
2014/04/16 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
情人节活动总结范文
2015/02/05 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫