转载修改
在项目中直接新建一个单文件页,复制一下代码即可
 
 
 
upload组件:
<template>
<div class="vue-uploader">
<div class="file-list">
<section v-for="(file, index) of files" class="file-item draggable-item">
<img :src="file.src" alt="" ondragstart="return false;">
<p class="file-name">{{file.name}}</p>
<span class="file-remove" @click="remove(index)">+</span>
</section>
<section v-if="status == 'ready'" class="file-item">
<div @click="add" class="add">
<span>+</span>
</div>
</section>
</div>
<section v-if="files.length != 0" class="upload-func">
<div class="progress-bar">
<section v-if="uploading" :width="(percent * 100) + '%'">{{(percent * 100) + '%'}}</section>
</div>
<div class="operation-box">
<button v-if="status == 'ready'" @click="submit">上传</button>
<button v-if="status == 'finished'" @click="finished">完成</button>
</div>
</section>
<input type="file" accept="image/*" @change="fileChanged" ref="file" multiple="multiple">
</div>
</template>
<script>
export default {
// props: {
// src: {
// type: String,
// required: true
// }
// },
data() {
return {
status: 'ready',
files: [],
point: {},
uploading: false,
percent: 0
}
},
methods: {
add() {
this.$refs.file.click()
},
submit() {
if (this.files.length === 0) {
console.warn('no file!');
return
}
const formData = new FormData()
this.files.forEach((item) => {
formData.append(item.name, item.file)
})
const xhr = new XMLHttpRequest()
xhr.upload.addEventListener('progress', this.uploadProgress, false)
xhr.open('POST', this.src, true)
this.uploading = true
xhr.send(formData)
xhr.onload = () => {
this.uploading = false
if (xhr.status === 200 || xhr.status === 304) {
this.status = 'finished'
console.log('upload success!')
} else {
console.log(`error:error code ${xhr.status}`)
}
}
},
finished() {
this.files = []
this.status = 'ready'
},
remove(index) {
this.files.splice(index, 1)
},
fileChanged() {
const list = this.$refs.file.files
for (let i = 0; i < list.length; i++) {
if (!this.isContain(list[i])) {
const item = {
name: list[i].name,
size: list[i].size,
file: list[i]
}
this.html5Reader(list[i], item)
this.files.push(item)
}
}
this.$refs.file.value = ''
},
// 将图片文件转成BASE64格式
html5Reader(file, item){
const reader = new FileReader()
reader.onload = (e) => {
this.$set(item, 'src', e.target.result)
}
reader.readAsDataURL(file)
},
isContain(file) {
this.files.forEach((item) => {
if(item.name === file.name && item.size === file.size) {
return true
}
})
return false
},
uploadProgress(evt) {
const component = this
if (evt.lengthComputable) {
const percentComplete = Math.round((evt.loaded * 100) / evt.total)
component.percent = percentComplete / 100
} else {
console.warn('upload progress unable to compute')
}
}
}
}
</script>
<style>
.vue-uploader {
border: 1px solid #e5e5e5;
}
.vue-uploader .file-list {
padding: 10px 0px;
}
.vue-uploader .file-list:after {
content: '';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
font-size: 0;
}
.vue-uploader .file-list .file-item {
float: left;
position: relative;
width: 100px;
text-align: center;
}
.vue-uploader .file-list .file-item img{
width: 80px;
height: 80px;
border: 1px solid #ececec;
}
.vue-uploader .file-list .file-item .file-remove {
position: absolute;
right: 12px;
display: none;
top: 4px;
width: 14px;
height: 14px;
color: white;
cursor: pointer;
line-height: 12px;
border-radius: 100%;
transform: rotate(45deg);
background: rgba(0, 0, 0, 0.5);
}
.vue-uploader .file-list .file-item:hover .file-remove {
display: inline;
}
.vue-uploader .file-list .file-item .file-name {
margin: 0;
height: 40px;
word-break: break-all;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.vue-uploader .add {
width: 80px;
height: 80px;
margin-left: 10px;
float: left;
text-align: center;
line-height: 80px;
border: 1px dashed #ececec;
font-size: 30px;
cursor: pointer;
}
.vue-uploader .upload-func {
display: flex;
padding: 10px;
margin: 0px;
background: #f8f8f8;
border-top: 1px solid #ececec;
}
.vue-uploader .upload-func .progress-bar {
flex-grow: 1;
}
.vue-uploader .upload-func .progress-bar section {
margin-top: 5px;
background: #00b4aa;
border-radius: 3px;
text-align: center;
color: #fff;
font-size: 12px;
transition: all .5s ease;
}
.vue-uploader .upload-func .operation-box {
flex-grow: 0;
padding-left: 10px;
}
.vue-uploader .upload-func .operation-box button {
padding: 4px 12px;
color: #fff;
background: #007ACC;
border: none;
border-radius: 2px;
cursor: pointer;
}
.vue-uploader > input[type="file"] {
display: none;
}
</style>

vue组件利用formdata图片预览以及上传《转载》的更多相关文章

  1. vue组件利用formdata图片预览以及上传

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  2. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  3. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  4. H5-FileReader实现图片预览&Ajax上传文件

    图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  6. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

  7. 在 vue 中使用 vieiwer 图片预览插件

    https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...

  8. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

  9. vue常用插件之图片预览

    v-viewer(1.4.2) 非常实用的图片预览插件,支持旋转.缩放.翻转等操作 一.npm安装 npm i v-viewer -S 二.全局引入(main.js中) import 'viewerj ...

随机推荐

  1. 将FTP映射至Windows

    在经常使用ftp传输文件的环境中,每次上传和下载文件都需要重新连接然后登录是非常繁琐的一件事情.我们可以将FTP空间映射到本地磁盘空间,免去输入地址以及账号.密码.方便我们日常中文件的上传和下载. 1 ...

  2. Python基础学习参考(五):字符串和编码

     一.字符串 前面已经介绍过字符串,通过单引号或者双引号表示的一种数据类型.下面就再来进一步的细说一下字符串.字符串是不可变的,当你定义好以后就不能改变它了,可以进一步的说,字符串是一种特殊的元组,元 ...

  3. 网络基础Cisco路由交换四

    NAT及静态转换 概述(NAT:网络地址转化) 作用: 通过将内部网络的私有ip地址翻译成全球唯一的公网ip地址, 使内部网络可以连接到互联网等外部网络上. NATA的特性 优点: 节省公有合法ip地 ...

  4. equals 与 == 区别及用法

    ==: 1. ==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同: 2.如果要比较两个变量是否指向同一个对象,这时候就需要用==操作符进行比较: 注意:= ...

  5. 【linux】linux下能ping通ip 但是不能ping通域名

    经过一翻查找后解决了,原因和方法如下: [root@~]# grep host /etc/nsswitch.conf#hosts: db files nisplus nis dnshosts:     ...

  6. 错误代码: 1449 The user specified as a definer ('root'@'%') does not exist

    1. 错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:call analyse_use('20150501','20150601 ...

  7. each遍历的用法

  8. CodeIgniter怎么引入公共的头部或者尾部文件(实现随意引入或分区域创建header.html,bodyer.html,footer.html)

    除非你天赋异禀,凡事基本对任何人来说都是开头难的,且开头的事情如果没有做好 往往会打掉一个人对于某件事的希望及其激情,所以咱们先从容易的事情开始慢慢建立自己 信心.后面的事情咱们再慢慢推进. 如果你是 ...

  9. 浅析git

    git是什么 简单来说,Git,它是一个快速的 分布式版本控制系统 (Distributed Version Control System,简称 DVCS) . 同传统的 集中式版本控制系统 (Cen ...

  10. 常用表单验证&&常用正则

    ### 表单验证&&常用正则 ;(function(ELF){ ELF = ELF || (window.ELF = {}); var reg = {}, pattern = { /* ...