使用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 相关文章推荐
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 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导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
python3生成随机数实例
2014/10/20 Python
Python实现简单http服务器
2018/04/12 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
pandas参数设置的实用小技巧
2020/08/23 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
西式结婚主持词
2014/03/14 职场文书
聘任书模板
2014/03/29 职场文书
高中生家长寄语大全
2014/04/03 职场文书
超市商业计划书
2014/05/04 职场文书
演讲稿的写法
2014/05/19 职场文书
化学教育专业自荐信
2014/07/04 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
大客户经理岗位职责
2015/04/09 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
深入理解python多线程编程
2021/04/18 Python
python自动化之如何利用allure生成测试报告
2021/05/02 Python
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS