使用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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
javascript中 try catch用法
Aug 16 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
Vuex的实战使用详解
Oct 31 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
如何判断php数组的维度
2013/06/10 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
jQuery操作cookie
2016/08/08 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
python操作CouchDB的方法
2014/10/08 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
python区分不同数据类型的方法
2019/10/14 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
解决python3输入的坑——input()
2020/12/05 Python
某公司Java工程师面试题笔试题
2016/03/27 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
优秀校长事迹材料
2014/12/24 职场文书
个人年终总结结尾
2015/03/06 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫